块元素中的垂直对齐文本

时间:2011-03-02 11:05:04

标签: html css html5 css3

我知道总是询问垂直对齐,但我似乎无法找到这个特定示例的解决方案。我希望文本在元素中居中,而不是以元素为中心:

HTML:

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS:

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}
<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

这真的没有CSS3属性吗?我愿意添加一个<span>,但我真的不想再添加标记了。

谢谢!

9 个答案:

答案 0 :(得分:76)

根据CSS Flexible Box Layout Module,您可以将a元素声明为 Flex容器(参见图)并使用align-items垂直< / em>沿十字轴(垂直于主轴)对齐文本。

enter image description here

这就是你需要做的就是

display: flex;
align-items: center;

浏览器支持注意事项

display: -webkit-flex;
-webkit-align-items: center;

火狐

layout.css.flexbox.enabled设为true

或者你仍然可以使用

display: -moz-box;
-moz-box-align: center;

只知道这不是css3-flexbox而且它不会包装。

IE

有人可以检查IE语法并在此处添加吗?您可以尝试Advanced cross-browser flexbox

中的语法

请参阅此fiddle(如果您使用的话,请务必将layout.css.flexbox.enabled设置为true。)

答案 1 :(得分:47)

您也可以尝试

a {
  height:100px;
  line-height:100px;
}

答案 2 :(得分:12)

li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;

}

答案 3 :(得分:4)

您可以尝试显示:inline-block和:after.Like this:

HTML

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}
li a:after {
  content:"";
  display: inline-block;
  width: 1px solid transparent;
  height: 100%;
  vertical-align: middle;
}

请查看demo

答案 4 :(得分:2)

使用填充是否可以满足您的需求?:http://jsfiddle.net/sm8jy/

li {
    background: red;
    text-align:center;
}
li a {
    padding: 4em 0;
    display: block;
}

答案 5 :(得分:1)

以下是仅使用CSS的一般解决方案,有两种变体。第一个在当前行中垂直居中,第二个在块元素中居中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <ul>
        <li>
            line one
        </li>
        <li>
            <span style="display: inline-block; vertical-align: middle">line two dot one
                <br />
                line two dot two</span>
        </li>
        <li>
            line three
        </li>
    </ul>
    <div style="height: 200px; line-height: 200px; border-style: solid;">
            <span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
                <br />
                line two dot two</span>
    </div>
</body>
</html>

据我了解,vertical-align仅适用于内联块元素,例如<img>。您必须将元素的显示属性更改为内联块才能使其生效。在该示例中,线高度扩展以适合跨度。如果要使用包含元素(例如<div>),请将line-height属性设置为与高度相同。警告,您必须在包含的<span>上指定line-height:normal,否则它将从包含元素继承。

答案 6 :(得分:0)

感谢弗拉德的answer获得灵感;测试和测试在IE11,FF49,Opera40,Chrome53上工作

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  text-align: center; /* H align */
  vertical-align: middle;
}

即使有文字换行,换行符,图像等,也能很好地集中在各个方向。

我很喜欢并制作了片段

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  /*H align*/
  text-align: center;
  /*V align*/
  vertical-align: middle;
}
a.thin {
  width: 40px;
}
a.break {
  /*force text wrap, otherwise `width` is treated as `min-width` when encountering a long word*/
  word-break: break-all;
}
/*more css so you can see this easier*/

li {
  display: inline-block;
}
li > a {
  padding: 10px;
  margin: 30px;
  background: aliceblue;
}
li > a:hover {
  padding: 10px;
  margin: 30px;
  background: aqua;
}
<li><a href="">My menu item</a>
</li>
<li><a href="">My menu <br> break item</a>
</li>
<li><a href="">My menu item that is really long and unweildly</a>
</li>
<li><a href="" class="thin">Good<br>Menu<br>Item</a>
</li>
<li><a href="" class="thin">Fantastically Menu Item</a>
</li>
<li><a href="" class="thin break">Fantastically Menu Item</a>
</li>
<br>
note: if using "break-all" need to also use "&lt;br>" or suffer the consequences

答案 7 :(得分:0)

如果要垂直和水平居中放置项,也可以在inline-table旁使用table-cell。下面是使用这些显示属性制作菜单的示例:

.menu {
  background-color: lightgrey;
  height: 30px; /* calc(16px + 12px * 2) */
}

.menu-container {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
}

.menu-item {
  list-style-type: none;
  display: inline-table;
  height: 100%;
}

.menu-item a {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration: none;
  color: initial;
}

.text-upper {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}
<header>
  <nav class="menu">
    <ul class="menu-container">
      <li class="menu-item text-upper text-bold"><a href="javascript:;">StackOverflow</a></li>
      <li class="menu-item"><a href="javascript:;">Getting started</a></li>
      <li class="menu-item"><a href="javascript:;">Tags</a></li>
    </ul>
  </nav>
</header>

通过将display: inline-table;设置为所有<li>,然后将display: table-cell;vertical-align: middle;应用于子项<a>来工作。这使我们不用使用<table>标签就可以了。

如果您不知道元素的高度,此解决方案很有用。

与Internet Explorer> = 8相比,兼容性非常好(相对于caniuse.com)。

答案 8 :(得分:0)

如果您使用的是ag-grid,请不要使用顶部的第四个解决方案。它将解决在中间对齐元素的问题,但可能会破坏ag-grid中的内容(对我来说,我无法在某行之后选择复选框)。问题不在于解决方案或ag-grid,但结合起来不好。

请勿将此解决方案用于AG-GRID

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}

li a:after {
    content:"";
    display: inline-block;
    width: 1px solid transparent;
    height: 100%;
    vertical-align: middle;
}