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

How can I align text in the center of a div without using height, line height and padding?

如何在不使用高度,线高和填充的情况下在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;
}

5 个解决方案

#1

I supose that you want to align vertically right? I don't know if I've understood well what you are asking, but I've done this.

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

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

I only added three lines in CSS. display:table for the parent and display:table-cell for the child. Finally I added vertical-align: middle to display the text on the middle if the height increments, and put text-align:center at container div.

我只在CSS中添加了三行。 display:用于父级的表和display:用于子级的table-cell。最后,我添加了vertical-align:middle,如果高度增加,则在中间显示文本,并将text-align:center放在容器div中。

Here you have an example

这里有一个例子

#2

The text-align is a property to be set on the parent really, so put it in the #slot css

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

http://jsfiddle.net/uFpCL/

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

#3

If you want the content of the #element tag to be centered, take @newpatriks' approach. But if you want the #element to be in the middle of the #slot element, you could add this css to the #slot element:

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

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

This way, all children of #slot will be centered in there.

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

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

#4

I think you should explore the flexbox. Its supposed to be the Holy Grail of layouts using css. A quick tutorial:

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

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

#5

Use margin to adjust your text

使用边距调整文字

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

it works fine now try ..

它现在工作正常尝试..

jsfiddle

#1