html - 位于父 div 之外的文本

标签 html css twitter-bootstrap

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 5 年前

以下 https://codepen.io/centem/pen/GQVGmw 的 css文本居中的状态,但文本位于父 div 的右下角,并且一些文本落在 div 之外。如何将文本居中放置在父 div 的中间?谢谢。

            <div class="row">
              <div id="86" class="square">hostname</div>
              <div id="87" class="square">hostname</div>
              <div id="88" class="square">hostname</div>
            </div>

CSS:

.col-md-4 .row div {
    display: inline-block;
    margin: 10px;
    background-color: black;
    color: green;
    padding: 30px;
    width: 10px;
    height: 10px;
    text-align: center;
}

最佳答案

是因为 padding: 30px; ,去掉了 padding 。还要添加 word-wrap: break-word; 以避免 outside text(overlaping)

.col-md-4 .row div {
    display: inline-block;
    margin: 10px;
    background-color: black;
    color: green;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    word-wrap: break-word;
}

关于html - 位于父 div 之外的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49149729/

上一篇:jquery - 如何分离每个元素的操作

下一篇:html - 使用 flexbox 排列 div

相关文章:

javascript - 在 Web 应用程序加载时加载 JSON 响应(JQuery、Django)

javascript - 开发人员可以使用哪些 HTML5 图像事件

html - 纯 CSS 幻灯片单选按钮(第四个按钮作为第一个?)

html - <hr> 标签作为图像

css - 如何将一个 div 对齐到另一个 div 的底部(在 Bootstrap 中)?

twitter-bootstrap - Bootstrap 4 chalice 布局

HTML - 使行内 block 元素看起来很小,但看起来很大

javascript - 是否可以从 XML 数据生成 HTML 5 页面?

css - 如何强制显示垂直滚动条?

jquery - 无法使用 jQuery 淡出子菜单