我知道总是询问垂直对齐,但我似乎无法找到这个特定示例的解决方案。我希望文本在元素中居中,而不是以元素为中心:
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>
,但我真的不想再添加标记了。
谢谢!
答案 0 :(得分:76)
根据CSS Flexible Box Layout Module,您可以将a
元素声明为 Flex容器(参见图)并使用align-items
来垂直< / em>沿十字轴(垂直于主轴)对齐文本。
这就是你需要做的就是
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:
<ul>
<li><a href="">I would like this text centered vertically</a></li>
</ul>
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)
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 "<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;
}