CSS 行高百分比不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6071987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
line-height as a percentage not working
提问by My Head Hurts
I am having an issue with line-height that I cannot quite get my head around.
我有一个行高问题，我无法完全理解。
The following code will center an image within a div:
以下代码将使图像在 div 中居中：
CSS
CSS
.bar {
height: 800px;
width: 100%;
line-height:800px;
background-color: #000;
text-align: center;
}
.bar img {
vertical-align: middle;
}
HTML
HTML
<div class="bar">
<img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>
However, if I change the line height to 100%, then the line height does not take effect (or at least does not become 100% of the div).
但是，如果我将行高更改为 100%，则行高不会生效（或者至少不会成为 div 的 100%）。
Does anyone know what I am doing wrong?
有谁知道我做错了什么？
回答by BoltClock
line-height: 100%means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length (px, pt, etc).
line-height: 100%表示该元素字体大小的 100%，而不是其高度的 100%。实际上，线高度总是相对于所述字体大小，而不是高度，除非其值使用绝对长度单位（px，pt等）。
回答by santiago arizti
I know this question is old, but I found what for me is the perfect workaround.
我知道这个问题很老，但我发现对我来说是完美的解决方法。
I add this css to the div that I want to center:
我将此 css 添加到要居中的 div 中：
div:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
This works every time and it is clean.
这每次都有效，而且很干净。
Edit: Just for completion's sake, I use scss and I have a handy mixin that I include on every parentwho's direct children I want to have vertically centered:
编辑：为了完成起见，我使用 scss 并且我有一个方便的 mixin，我将它包含在每个我想要垂直居中的直系孩子的父母身上：
@mixin vertical-align($align: middle) {
&:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: $align;
// you can add font-size 0 here and restore in the children to prevent
// the inline-block white-space to mess the width of your elements
font-size: 0;
}
& > * {
vertical-align: $align;
// although you need to know the font-size, because "inherit" is 0
font-size: 14px;
}
}
Full explanation:
div:beforewill add an element inside the div, but before any of its children. When using :beforeor :afterwe must use a content:declaration otherwise nothing will happen, but for our purpose, the content can be empty. Then we tell the element to be as tall as its parent, as long as its parent's height is defined and this element is at least inline-block. vertical-aligndefines the vertical position of self related to parent, as opposed to text-alignthat works differently.
完整说明：
div:before将在 div 内添加一个元素，但在其任何子级之前。使用:beforeor 时:after我们必须使用content:声明，否则什么都不会发生，但出于我们的目的，内容可以为空。然后我们告诉元素与其父元素一样高，只要定义了它的父元素的高度并且这个元素至少是行内块。vertical-align定义 self 与 parent 相关的垂直位置，而不是text-align工作方式不同。
The @mixindeclaration is for sass users and it would be used like this:
该@mixin声明适用于 sass 用户，它的用法如下：
div {
@include vertical-align(middle)
}
回答by locrizak
When you use percentage as the line-height it is not based on the div container, rather its based on the font-size.
当您使用百分比作为行高时，它不是基于 div 容器，而是基于字体大小。
回答by Rolf
line-height: 100% would be an easy way to vertically center elements, if it was calculated in relation to the container, but that would be too easy, hence it doesn't work.
line-height: 100% 将是垂直居中元素的一种简单方法，如果它是相对于容器计算的，但这太容易了，因此它不起作用。
So instead, it is just another way of saying line-height: 1em (right?)
所以相反，这只是 line-height: 1em 的另一种说法（对吗？）
Another way of vertically centering an element would be:
另一种垂直居中元素的方法是：
.container {
position:relative;
}
.center {
position:absolute;
top:0; left:0; bottom:0; right:0;
margin: auto;
/* for horiz left-align, try "margin: auto auto auto 0" */
}
回答by Johan Olsson
might not be pretty, but it's working, and its semantic;
可能不漂亮，但它有效，而且它的语义；
<div class="bar" style="display: table; text-align: center;">
<img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>
display: table-cell gives an element the unique table ablillity to align verticaly (atleast i think its unique)
显示：表格单元格为元素提供了独特的表格能力以垂直对齐（至少我认为它是独一无二的）
回答by FelisPhasma
回答by Webars
This solution works in IE9 and above. First we set the child's top position to 50% (middle of the parent). Then using translaterule, shift the child up by a half of its actual height. The main benefit is that we don't need to define child's height, it's calculated by the browser dynamically. JSFiddle
此解决方案适用于 IE9 及更高版本。首先，我们将孩子的顶部位置设置为 50%（父母的中间）。然后使用translate规则，将孩子向上移动其实际高度的一半。主要的好处是我们不需要定义孩子的身高，它是由浏览器动态计算的。JSFiddle
.bar {
height: 500px;
text-align: center;
background: green;
}
.bar img {
position: relative;
top: 50%;
transform: translate(0, -50%);
}
回答by santiago arizti
A more modern approach is to use flexbox for this, it is simpler and cleaner. However, flexbox is an entirely different paradigm from what inline-block, floator positionused to be.
一种更现代的方法是为此使用 flexbox，它更简单、更干净。然而， flexbox 是一个完全不同的范式inline-block，float或者position曾经是。
To align items inside .parentyou do:
要对齐.parent您内部的项目，请执行以下操作：
.parent {
display: flex;
align-items: center;
}
That is about it. Children of flexparents are automatically converted to flex child items.
就是这样。儿童flex的父母将自动转换为柔性子项。
You should read more about flexbox, a good place to start is this cheat sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
你应该阅读更多关于 flexbox 的内容，一个很好的起点是这个备忘单：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
回答by Raja
You can set line-heightbased on that element height. If the element height 200px means you need to set line height to 200px to center the text.
您可以根据该元素高度设置line-height。如果元素高度 200px 意味着您需要将行高设置为 200px 以将文本居中。
span {
height: 200px;
width: 200px;
border: 1px solid black;
line-height: 200px;
display: block;
}<span>Im vertically center</span>