Question

以下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;
}

Answer 1

这是因为padding: 30px;，删除填充。同时添加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;
}

Answer 2

尝试随之改变

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

Answer 3

<div className="field-container count-field"
        style={{ display: shouldRemoveElement ? 'none' : true, visibility: shouldHideElement ? 'hidden' : 'visible' }}>
      <customComponent>..</customComponent>
</div>

坐在父div之外的文本

3 个答案: