垂直对齐块元素中的文本
[英]Vertical align text in block element
问题描述
I know vertical alignment is always asked about, but I don't seem to be able to find a solution for this particular example.
我知道垂直 alignment 总是被问到，但我似乎无法找到这个特定示例的解决方案。 I'd like the text centered within the element, not the element centered itself:我希望文本在元素内居中，而不是元素本身居中：
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>
Is there really no CSS property for this?真的没有 CSS 这个属性吗？ I'd be willing to add a <span> in but I really don't want to add any more markup than that.我愿意在其中添加一个<span>但我真的不想添加比这更多的标记。
10 个解决方案
解决方案1
96 已采纳 2011-03-02 11:14:43
According to the CSS Flexible Box Layout Module , you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis ).根据CSS 灵活框布局模块，您可以将a元素声明为flex 容器（见图）并使用align-items沿交叉轴（垂直于主轴）垂直对齐文本。
All you need to do is:您需要做的就是：
display: flex;
align-items: center;
解决方案2
53 2012-02-23 04:00:25
You can also try你也可以试试
a {
height:100px;
line-height:100px;
}
解决方案3
12 2014-04-04 09:26:52
li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;
} }
解决方案4
4 2013-06-18 01:08:28
You can try the display:inline-block and :after.Like this:你可以试试 display:inline-block 和 :after。像这样：
HTML HTML
<ul>
<li><a href="">I would like this text centered vertically</a></li>
</ul>
CSS 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;
}
解决方案5
4 2021-09-15 01:26:50
display: grid; place-content: center;
no need margin.不需要保证金。
li a { width: 300px; height: 100px; display: grid; place-content: center; background: red; }
<ul> <li><a href="">I would like this text centered vertically</a></li> </ul>
解决方案6
2 2011-03-02 11:14:08
Would using padding be OK for your needs?: http://jsfiddle.net/sm8jy/ :使用填充可以满足您的需求吗？： http : //jsfiddle.net/sm8jy/ ：
li {
background: red;
text-align:center;
}
li a {
padding: 4em 0;
display: block;
}
解决方案7
2 2018-11-24 23:34:27
You can also use inline-table alongside table-cell if you want to center your items vertically and horizontally.如果您想垂直和水平居中您的项目，您还可以在table-cell旁边使用inline-table 。 Below an example of using those display properties to make a menu:下面是使用这些显示属性制作菜单的示例：
.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>
It works by setting display: inline-table;它的工作原理是设置display: inline-table; to all the <li> , and then applying display: table-cell;到所有<li> ，然后应用display: table-cell; and vertical-align: middle;和vertical-align: middle; to the children <a> .给孩子们<a> 。 This gives us the power of <table> tag without using it.这为我们提供了<table>标签的强大功能，而无需使用它。
This solution is useful if you do not know the height of your element.如果您不知道元素的高度，此解决方案很有用。
The compatibilty is very good (relative to caniuse.com ), with Internet Explorer >= 8.兼容性非常好（相对于caniuse.com ），Internet Explorer >= 8。
解决方案8
1 2012-06-13 15:48:03
Here's the general solution using just CSS, with two variations.这是仅使用 CSS 的通用解决方案，有两种变体。 The first centers vertically in the current line, the second centers within a block element.第一个在当前行垂直居中，第二个在块元素内居中。
<!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>
As I understand it, vertical-align applies only to inline-block elements, eg, <img> .据我了解，vertical-align 仅适用于行内块元素，例如<img> 。 You have to change an element's display attribute to inline-block for it to work.您必须将元素的 display 属性更改为 inline-block 才能使其工作。 In the example, the line height expands to fit the span.在示例中，行高扩展以适应跨度。 If you want to use a containing element, such as a <div> , set the line-height attribute to be the same as the height.如果要使用包含元素，例如<div> ，请将 line-height 属性设置为与高度相同。 Warning, you will have to specify line-height: normal on the contained <span> , or it will inherit from the containing element.警告，您必须在包含的<span>上指定 line-height: normal ，否则它将从包含的元素继承。
解决方案9
0 2016-10-01 03:48:08
with thanks to Vlad's answer for inspiration;感谢弗拉德对灵感的回答； tested & working on IE11, FF49, Opera40, Chrome53在 IE11、FF49、Opera40、Chrome53 上测试和工作
li > a {
height: 100px;
width: 300px;
display: table-cell;
text-align: center; /* H align */
vertical-align: middle;
}
centers in all directions nicely even with text wrapping, line breaks, images, etc.即使有文字换行、换行、图像等，也能很好地居中。
I got fancy and made a snippet我很喜欢并做了一个片段
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
解决方案10
0 2020-08-26 06:35:09
DO NOT USE THE 4th solution from top if you are using ag-grid.如果您使用的是 ag-grid，请不要使用上面的第四个解决方案。 It will fix the issue for aligning the element in middle but it might break the thing in ag-grid (for me i was not able to select checkbox after some row).它将解决在中间对齐元素的问题，但它可能会破坏 ag-grid 中的东西（对我来说，我无法在某行之后选择复选框）。 Problem is not with the solution or ag-grid but somehow the combination is not good.问题不在于解决方案或 ag-grid，但不知何故这种组合并不好。
DO NOT USE THIS SOLUTION FOR 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.