里面的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: middledisplay: 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元素。

你不需要提供任何明确的marginspaddings使你的文字垂直居中。

演示

 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>