Question

如何在不使用高度，线高和填充的情况下对齐div中心的文本？

<div id="slot">
   <p id="element">100 </p>
</div>

#slot {
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    overflow: hidden;
}

#element {
    text-align: center;
}

Answer 1

text-align是要在父级上设置的属性，所以把它放在#slot css

中

http://jsfiddle.net/uFpCL/

#slot {
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    overflow: hidden;
    text-align: center;
}

Answer 2

我想说你想垂直对齐吗？我不知道我是否理解你的要求，但我已经做到了。

HTML

<div id="slot"><p id="element">100 </p></div>

CSS

#slot {
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    display:table;
    height:150px;
    text-align: center;
}

#element {    
    display:table-cell;
    vertical-align:middle;
}

我只在CSS中添加了三行。父亲为display:table，儿童为display:table-cell。最后，如果高度增加，我添加vertical-align: middle以显示中间的文本，并将text-align:center放在容器div。

Here you have an example

Answer 3

如果您希望 #element 标记的内容居中，请采用@newpatriks方法。但是，如果您希望 #element 位于 #slot 元素的中间，则可以将此css添加到 #slot 元素中：

#slot {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

这样， #slot 的所有孩子都会在那里居中。

http://jsfiddle.net/A7S8h/3/

Answer 4

我认为你应该探索一下flexbox。它应该是使用CSS的布局的圣杯。快速教程：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

使用保证金调整文字

 #slot {
  margin:auto;
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    overflow: hidden;
    text-align: center;
}

现在可以正常试试..

jsfiddle

如何在不使用高度，线高和填充的情况下将文本对齐div的中心？

5 个答案: