标题元素中的垂直对齐答案

【问题标题】：Vertical align in header elements标题元素中的垂直对齐
【发布时间】：2018-06-13 01:35:24
【问题描述】：

我知道这里有很多人问这个问题，但由于某种原因，我尝试的所有方法似乎都不适用于我的代码。

我想垂直对齐元素中的文本

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：

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

http://jsfiddle.net/E7DAe/

我已经尝试过的：（不成功）

在 headerElems 中将 line-height 设置为 100%
设置display: table-cell
将其放入 ul 和 lis 并设置 display:table 和 display:table-cell

谁能给我一个解决方案？

【问题讨论】：

你的代码中的 h: 标签是什么意思？

标签： html css vertical-alignment

【解决方案1】：

你可以使用

div.headerElements:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Demo（注意：为了看得更清楚，我增加了包装器的高度）

基于http://css-tricks.com/centering-in-the-unknown/，阅读全文。

【讨论】：

我投了赞成票，但后来被删除，因为不幸的是，这对我来说不适用于多行文本。我将重新投票，因为它是单行文本的一个很好的修复。谢谢！

【解决方案2】：

我最终使用了 flex 容器。所以在本例中，将 div#mainWrapper 的 CSS 更改为：

div#mainWrapper {
    height: 100%;
    width: 100%;
    background: url(../images/women.jpg) no-repeat center center;
    display: flex;
    align-items: center;
}

【讨论】：

【解决方案3】：

这是另一个建议，但我不确定我是否理解这个问题。

div {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

http://jsfiddle.net/XXyp2/

【讨论】：

我常用这个方案。就是这么简单，

【解决方案4】：

你也可以使用这种方式 -

1 :- Html 部分

<div>
    <h1>try me</h1>
</div>

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

【讨论】：

【解决方案5】：

尝试用这个替换你的实际css“div.headerElements”（刚刚删除“float：left;”）：

div.headerElements {
    height: 100%;
    width: 10%;
    text-align: center;
}

http://jsfiddle.net/E7DAe/3/

【讨论】：

我认为他的意思是他想沿水平线垂直对齐环绕元素内的文本。不垂直对齐所有元素。
那么为什么不呢？在额外的费用 SO 确实提供了读心术的神经增强；）

【解决方案6】：

您可以使用clear:both; 来实现这一点。像这样的：

div.headerElements {
  float: left;
  height: 100%;
  width: 10%;
  clear: both;
  text-align: center;
}

Check this JSFiddle 来说明这个实现。

【讨论】：

【解决方案7】：

最简单易用的解决方案imo..也是最安全的，除非你支持IE8是：

HTML

<h2>
    <span>30 mins</span>
</h2>

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

小提琴先生

http://jsfiddle.net/hutber/wpmtkwkL/

【讨论】：