里面的CSS垂直alignment文本
我使用<li>标签生成的固定高度和宽度，显示连续数量的框。 现在我需要在垂直中心alignment文本。 CSS垂直alignment没有影响，也许我失去了一些东西？
我不使用（边距，填充，行高）寻找技巧，这些将无法正常工作，因为一些文本很长，将分成两行。
请find实际的代码：
CSS代码
ul.catBlock{ width:960px; height: 270px; border:1px solid #ccc; } ul.catBlock li{ list-style: none; float:left; display:block; text-align: center; width:160px; height: 100px; } ul.catBlock li a{ display: block; padding: 30px 10px 5px 10px; height:60px; } HTML代码
<ul class="catBlock"> <li><a href="#">IP Phone</a></li> <li><a href="#">Dual SIM Switch Server</a></li> <li><a href="#">IP PBX</a></li> </ul>
使用display: table定义父级，使用vertical-align: middle和display: table-cell定义元素本身。
line-height是如何垂直alignment文本。 这是相当标准的，我不认为这是一个“黑客”。 只要将line-height: 100px添加到你的ul.catBlock li就行了。
在这种情况下，您可能必须将其添加到ul.catBlock li a因为ul.catBlock li a所有文本也都在a 。 当你这样做的时候，我已经看到了一些奇怪的事情，所以试试看看哪一个工作。
令人惊讶（或不）， vertical-align工具实际上最适合这项工作。 最重要的是，不需要Javascript。
在下面的例子中，我将outer类定位在主体的中间，并将outer类置于outer类的中间。
预览： http : //jsfiddle.net/tLkSV/513/
HTML：
<div id="container"> <span></span><div class="outer"> <span></span><div class="inner"> </div> </div> </div>
CSS：
html, body { height: 100%; margin: 0; padding: 0; } #container { text-align: center; height: 100%; } span { height: 100%; vertical-align: middle; display: inline-block; } .outer { width: 100px; height: 200px; padding: 0; border: 1px solid #000; vertical-align: middle; display: inline-block; } .inner { background: red; width: 30px; height: 20px; vertical-align: middle; display: inline-block; }
垂直alignment通过alignment彼此相邻的元素的中心来工作。 将垂直alignment应用于单个元素没有任何作用。 如果添加第二个没有宽度但是是容器高度的元素，那么您的单个元素将移动到垂直居中，使用此无宽度元素垂直居中。 唯一的要求是将两个元素设置为内联（或内嵌块），并将vertical-align属性设置为vertical-align: middle 。
注意：您可能会注意到我的代码中我的<span>标记和<div>标记正在触摸。 因为它们都是内联元素，所以空格实际上会在无宽元素和div之间添加一个空格，所以一定要将其保留。
将来，这个问题将由flexbox解决。 目前浏览器的支持情况很糟糕，但在所有当前浏览器中都以某种forms支持。
浏览器支持： http ： //caniuse.com/flexbox
.vertically_aligned { /* older webkit */ display: -webkit-box; -webkit-box-align: center; -webkit-justify-content: center; /* older firefox */ display: -moz-box; -moz-box-align: center; -moz-box-pack: center; /* IE10*/ display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center; /* newer webkit */ display: -webkit-flex; -webkit-align-items: center; -webkit-box-pack: center; /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */ display: flex; align-items: center; justify-content: center; }
Flexbox背景： http ://css-tricks.com/snippets/css/a-guide-to-flexbox/
这里没有提供完美的答案，除了Asaf的答案，不提供任何代码或任何示例，所以我想贡献我的…
为了使vertical-align: middle; 工作，你需要使用display: table; 为你的ul元素和display: table-cell; 对于li元素和比你可以使用vertical-align: middle; 为li元素。
你不需要提供任何明确的margins ， paddings使你的文字垂直居中。
演示
ul.catBlock{ display: table; width:960px; height: 270px; border:1px solid #ccc; } ul.catBlock li { list-style: none; display: table-cell; text-align: center; width:160px; vertical-align: middle; } ul.catBlock li a { display: block; }
正如在这里解释：http: //zizhujy.com/blog/post/2014/09/30/CSS-Make-text-inside-floated-%60lt;li-gt;%60-element-vertically-middle-aligned .aspx 。
正如在实践中所testing的那样，最可靠而优雅的解决scheme是将一个内联元素作为第一个子元素插入
<li />元素，该元素的高度应设置为100％（父元素的高度为<li />），其vertical-align设置为中间。 为了达到这个目的，你可以放一个<span />，但最方便的方法是使用li:after伪类之后。
截图： 
ul.menu-horizontal { list-style-type: none; margin: 0; padding: 0; display: inline-block; vertical-align: middle; } ul.menu-horizontal:after { content: ''; clear: both; float: none; display: block; } ul.menu-horizontal li { padding: 5px 10px; box-sizing: border-box; height: 100%; cursor: pointer; display: inline-block; vertical-align: middle; float: left; } /* The magic happens here! */ ul.menu-horizontal li:before { content: ''; display: inline; height: 100%; vertical-align: middle; }
试试这个解决scheme
在大多数情况下效果最好
你可能不得不使用div而不是li
.DivParent { height: 100px; border: 1px solid lime; white-space: nowrap; } .verticallyAlignedDiv { display: inline-block; vertical-align: middle; white-space: normal; } .DivHelper { display: inline-block; vertical-align: middle; height:100%; }
<div class="DivParent"> <div class="verticallyAlignedDiv"> <p>Isnt it good!</p> </div><div class="DivHelper"></div> </div>
