Html li内的CSS垂直对齐文本

Question

提问by AK4668

I am displaying number of boxes in a row with fix height and width, generated from <li> tags. now I need to align the text in the vertical center. The CSS vertical-align has no impact, maybe I am missing something???

我正在显示一行中固定高度和宽度的框数，这些框是从 <li> 标签生成的。现在我需要在垂直中心对齐文本。CSS 垂直对齐没有影响，也许我遗漏了什么？？？

I am not looking for tricks using (margin, padding, line-height), these will not work because some text are long and will break into two lines.

我不是在寻找使用（边距，填充，行高）的技巧，这些将不起作用，因为某些文本很长并且会分成两行。

Please find the actual code:

请找到实际代码：

CSS code

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 code

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>

Answer 1

回答by Asaf Chertkoff

Define the parent with display: tableand the element itself with vertical-align: middleand display: table-cell.

定义与父display: table并与元素本身vertical-align: middle和display: table-cell。

Answer 2

回答by Logan Serman

line-heightis how you vertically align text. It is pretty standard and I don't consider it a "hack". Just add line-height: 100pxto your ul.catBlock liand it will be fine.

line-height是垂直对齐文本的方式。这是非常标准的，我不认为它是“黑客”。只需添加line-height: 100px到你的ul.catBlock li，它会没事的。

In this case you may have to add it to ul.catBlock li ainstead since all of the text inside the liis also inside of an a. I have seen some weird things happen when you do this, so try both and see which one works.

在这种情况下，您可能必须将其添加到，ul.catBlock li a因为中的所有文本li也在a. 当你这样做时，我看到一些奇怪的事情发生，所以尝试两种方法，看看哪个有效。

Answer 3

回答by flyingace

However many years late this response may be, anyone coming across this might just want to try

无论此响应可能晚了多少年，遇到此问题的任何人都可能只想尝试

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

Browser support for flexbox is far better than it was when @scottjoudry posted his response above, but you may still want to consider prefixing or other options if you're trying to support much older browsers. caniuse: flex

浏览器对 flexbox 的支持比 @scottjoudry 在上面发布他的回复时要好得多，但是如果您试图支持更旧的浏览器，您可能仍然需要考虑前缀或其他选项。caniuse: flex

Answer 4

回答by Wex

Surprisingly (or not), the vertical-aligntool actually works best for this job. Best of all, no Javascript is required.

令人惊讶的是（或不是），该vertical-align工具实际上最适合这项工作。最重要的是，不需要 Javascript。

In the following example, I am positioning the outerclass in the middle of the body, and the innerclass in the middle of the outerclass.

在下面的示例中，我将outer类定位在主体inner的中间，并将outer类定位在类的中间。

Preview: http://jsfiddle.net/tLkSV/513/

预览：http: //jsfiddle.net/tLkSV/513/

HTML:

HTML：

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS:

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

Vertical align works by aligning the centers of elements that are next to each other. Applying vertical-align to a single element does absolutely nothing. If you add a second element that has no width but is the height of the container, your single element will move to vertically center with this no-width element, thus vertically centering it. The only requirements are that you set both elements to inline (or inline-block), and set their vertical-align attribute to vertical-align: middle.

垂直对齐的工作原理是对齐彼此相邻的元素的中心。将垂直对齐应用于单个元素绝对没有任何作用。如果您添加第二个没有宽度但与容器高度相同的元素，您的单个元素将移动到此无宽度元素的垂直居中，从而垂直居中。唯一的要求是将两个元素都设置为 inline（或 inline-block），并将它们的 vertical-align 属性设置为vertical-align: middle。

Note: You may notice in my code below that my <span>tag and <div>tag are touching. Because they are both inline elements, a space will actually add a space between the no-width element and your div, so be sure to leave it out.

注意：您可能会在我下面的代码中注意到我的<span>标签和<div>标签相互影响。因为它们都是内联元素，所以空格实际上会在无宽度元素和您的 div 之间添加一个空格，因此请务必将其省略。

Answer 5

回答by Scott Joudry

In the future, this problem will be solved by flexbox. Right now the browser support is dismal, but it is supported in one form or another in all current browsers.

以后这个问题会通过 flexbox 来解决。现在浏览器的支持很糟糕，但在所有当前浏览器中都以一种或另一种形式支持。

Browser support: http://caniuse.com/flexbox

浏览器支持：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;
}

Background on Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox 背景：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 6

回答by Mr. Alien

There are no perfect answers provided here except Asaf's answer which doesn't provide any code nor any example, so I would like to contribute mine...

这里没有提供完美的答案，除了 Asaf 的答案，它没有提供任何代码或任何示例，所以我想贡献我的......

Inorder to make vertical-align: middle;work, you need to use display: table;for your ulelement and display: table-cell;for lielements and than you can use vertical-align: middle;for lielements.

为了vertical-align: middle;工作，你需要使用display: table;for 你的ul元素和display: table-cell;forli元素，而不是你可以使用vertical-align: middle;的li元素。

You don't need to provide any explicit margins, paddingsto make your text vertically middle.

您不需要提供任何明确的margins,paddings使您的文本垂直居中。

Demo

演示

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

Answer 7

回答by Jeff Tian

As explained in here: https://css-tricks.com/centering-in-the-unknown/.

如此处所述：https: //css-tricks.com/centering-in-the-unknown/。

As tested in the real practice, the most reliable yet elegant solution is to insert an assistent inline element into the <li />element as the 1st child, which height should be set to 100% (of its parent's height, the <li />), and its vertical-alignset to middle. To achieve this, you can put a <span />, but the most convenient way is to use li:afterpseudo class.

正如在实际实践中测试的那样，最可靠而优雅的解决方案是将一个辅助内联元素<li />作为第一个子元素插入元素中，其高度应设置为 100%（其父元素的高度，the <li />），并将其vertical-align设置为中间. 为此，您可以放置一个<span />，但最方便的方法是使用li:after伪类。

Screenshot: enter image description here

截屏：在此处输入图片说明

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

Answer 8

回答by keshav

Give this solution a try

试试这个解决方案

Works best in most of the cases

在大多数情况下效果最佳

you may have to use divinstead of lifor that

您可能需要使用DIV，而不是李为

.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>

Answer 9

回答by Fahad Ali

Simple solution for vertical align middle... for me it works like a charm

垂直对齐中间的简单解决方案......对我来说它就像一个魅力

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}

Html li内的CSS垂直对齐文本

提问by AK4668

CSS code

CSS代码

HTML code

HTML代码

回答by Asaf Chertkoff

回答by Logan Serman

回答by flyingace

回答by Wex

回答by Scott Joudry

回答by Mr. Alien

回答by Jeff Tian

回答by keshav

Works best in most of the cases

在大多数情况下效果最佳

回答by Fahad Ali

相关推荐

最近更新

标签

Html li内的CSS垂直对齐文本

提问by AK4668

CSS code

CSS代码

HTML code

HTML代码

回答by Asaf Chertkoff

回答by Logan Serman

回答by flyingace

回答by Wex

回答by Scott Joudry

回答by Mr. Alien

回答by Jeff Tian

回答by keshav

Works best in most of the cases

在大多数情况下效果最佳

回答by Fahad Ali

相关推荐

Html 如何修复 Firefox 和 Chrome 之间的 CSS 填充问题？

带有自定义参数的 Html.DropDownListFor()

删除换行符 HTML

Html 可扩展的树形菜单列表

相关推荐

最近更新

标签