Html 标题元素中的垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20109811/
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
Vertical align in header elements
提问by Jakob Abfalter
I know this got asked a lot here, but all the methods I am trying seem not to work for my code for some reason.
我知道这里经常有人问这个问题，但是由于某种原因，我尝试的所有方法似乎都不适用于我的代码。
I want to vertically align the text in the elements
我想垂直对齐元素中的文本
HTML:
HTML：
<div id="mainWrapper">
<div id="header">
<div id="logo" class="headerElements">
<h:outputText class="headerText" value="RedPrice" />
</div>
<div id="login" class="headerElements">
<h:outputText class="headerText" value="Login" />
</div>
<div id="register" class="headerElements">
<h:outputText class="headerText" value="Register" />
</div>
<div id="follow" class="headerElements">
<h:outputText class="headerText" value="Follow us" />
</div>
</div>
</div>
CSS:
CSS：
*{
margin:0;
padding:0;
}
body,html {
height: 100%;
font-family: 'Quicksand', sans-serif;
}
div#mainWrapper {
height: 100%;
width: 100%;
background: url(../images/women.jpg) no-repeat center center;
}
div#header {
width: 100%;
height: 5%;
background: white;
opacity: 0.5;
}
div.headerElements {
float: left;
height: 100%;
width: 10%;
text-align: center;
}
div.headerElements:hover {
background: orangered;
opacity: 0.5;
}
.headerText {
font-size: x-large;
}
What I have already tried: (unsuccesfully)
我已经尝试过的：（不成功）
- setting line-height to 100% in headerElems
- setting
display: table-cell - putting it into a
ulandlisand setting display:table and display:table-cell
- 在 headerElems 中将 line-height 设置为 100%
- 环境
display: table-cell - 将它放入一个
ul和lis并设置 display:table 和 display:table-cell
Can somebody provide me with a solution?
有人可以为我提供解决方案吗？
回答by Oriol
You can use
您可以使用
div.headerElements:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
Demo(Note: I have increased wrapper's height to see it better)
演示（注意：我增加了包装器的高度以更好地看到它）
Based on http://css-tricks.com/centering-in-the-unknown/, read it for a full explanation.
基于http://css-tricks.com/centering-in-the-unknown/，阅读它以获得完整的解释。
回答by laylarenee
Here is another suggestion, but I am not certain I understand the question.
这是另一个建议，但我不确定我是否理解这个问题。
div {
height: 40px;
line-height: 40px;
vertical-align: middle;
}
回答by Decha
I ended up using flex container. So in this example, change the CSS for div#mainWrapper to this:
我最终使用了 flex 容器。因此，在此示例中，将 div#mainWrapper 的 CSS 更改为：
div#mainWrapper {
height: 100%;
width: 100%;
background: url(../images/women.jpg) no-repeat center center;
display: flex;
align-items: center;
}
回答by Pankaj Bisht
Yo can use this way also -
你也可以用这种方式——
1 :- Html part
1 :- Html 部分
<div>
<h1>try me</h1>
</div>
2 :- Css Part
2 :- CSS 部分
div {
background: #000;
color: #FFFFFF;
height: 30px;
display: table;
width: 100%;
text-align: center;
}
div > h1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
回答by Jamie Hutber
The most simple and easy to use solution imo.. also the safest unless you're support IE8is:
最简单易用的解决方案imo..也是最安全的，除非你得到支持IE8：
HTML
HTML
<h2>
<span>30 mins</span>
</h2>
CSS
CSS
h2 {
height: 120px;
position: relative;
}
h2 span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Mr Fiddle
小提琴先生
回答by user2196728
Try replacing your actual css "div.headerElements" by this one (just deleted "float: left;"):
尝试用这个替换你的实际css“div.headerElements”（刚刚删除了“float：left;”）：
div.headerElements {
height: 100%;
width: 10%;
text-align: center;
}
回答by Leonardo Barbosa
You can use clear:both;to achieve that. Something like this:
你可以用它clear:both;来实现。像这样的东西：
div.headerElements {
float: left;
height: 100%;
width: 10%;
clear: both;
text-align: center;
}
Check this JSFiddleto illustrate this implementation.
检查这个 JSFiddle来说明这个实现。
