[英]Vertical alignment of text inside div
I really need help on this: cracking me for 2nd day already. 在这方面,我真的需要帮助:第二天就让我难受。 I have the following code:
我有以下代码:
* {
margin: 0;
padding: 0;
font: 16px Verdana, Arial, sans-serif;
color: #444;
line-height: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}
.inlbtn {
width: 2rem;
height: 2rem;
display: table;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
.plus:before {
content: "+";
}
<div class='inlbtn'><span class='plus'></span></div>
It basically has a div and span inside with a "+" symbol. 它基本上在内部具有div和span,并带有“ +”符号。 The horizontal alignment seems fine, but the vertical is a little shifted down.
水平对齐方式看起来不错,但垂直方向有些下移。 How to make it perfectly centered vertically?
如何使其在垂直方向上完美居中?
I played around with the code and it seems the code under * is the culprit, but why? 我玩过代码,看来*下的代码是罪魁祸首,但是为什么呢?
Here's fiddle http://jsfiddle.net/jk34josq/2/ 这是小提琴http://jsfiddle.net/jk34josq/2/
You do everything right, I always use the same method. 您做的一切正确,我始终使用相同的方法。 The problem is that this line
问题是这条线
content: "+";
is a piece of text, so it automatically has top margin inside of the line-height
preserved for the capital letters (and + symbol is not the one); 是一段文字,因此它会自动在保留为大写字母的
line-height
内的顶部具有边距(并且+符号不是一个); the margin value could also be different depending on the font. 页边距值也可以根据字体而有所不同。
As a proof try the following: 作为证明,请尝试以下操作:
content: "A";
This looks centered. 这看起来居中。
What you can do to avoid this behavior: 您可以做些什么来避免这种现象:
line-height
property but I have doubts about this method line-height
属性,但我对此方法有疑问 I would use only a single HTML element, since there is no need for using an extra element nor a :before
pseudo class: 我将只使用一个HTML元素,因为不需要使用额外的元素或
:before
伪类:
<div class='inlbtn'>+</div>
Then I would use display: inline-block
, instead of table. 然后,我将使用
display: inline-block
,而不是table。
As mentioned by Simon in his answer, the +
character is smaller than A
. 正如Simon在回答中提到的,
+
字符小于A
But instead of using negative margins or paddings, I would alter the line-height: 但是,我不使用负边距或填充,而是更改了行高:
.inlbtn {
width: 2rem;
height: 2rem;
font-size: 1.5rem;
line-height: 1.5rem;
display: inline-block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.inlbtn {
width: 2rem;
height: 2rem;
display: block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: inline-block;
vertical-align: middle !important;
}
.plus:before {
content:"+";
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.