Html 如何在div内垂直居中<span>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4357315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically center a <span> inside a div?
提问by Babiker
The code:
编码：
<div
id="theMainDiv"
style="
border:solid 1px gray;
cursor:text;
width:400px;
padding:0px;"
>
<span
id="tag1_outer"
style="
background:#e2e6f0;
padding-right:4px;
padding-left:4px;
border:solid 1px #9daccc;
font:normal 11px arial;
color:#3c3c3c"
>as</span>
</div>
As it renders now, the span is align the bottom-left corner of the div.
当它现在呈现时，跨度与 div 的左下角对齐。
采纳答案by Phrogz
See my article on understanding vertical alignment. There are multiple techniques to accomplish what you want at the end of the discussion.
请参阅我关于理解垂直对齐的文章。有多种技术可以在讨论结束时完成您想要的内容。
(Super-short summary: either set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50%with margin-top:-YYYpx, YYY being half the known height of the child.)
（超简短摘要：要么设置儿童的行高等于容器的高度，或在容器上组的定位，并在绝对位置的子top:50%带margin-top:-YYYpx，YYY是儿童的已知高度的一半。）
回答by Otto Kanellis
At your parent DIV add
在您的父 DIV 添加
display:table;
and at your child element add
并在您的子元素添加
display:table-cell;
vertical-align:middle;
回答by JGallardo
Quick answer for single line span
单行跨度快速解答
Make the child (in this case a span) the same line-heightas the parent <div>'s height
使孩子（在本例中为跨度）与line-height父母<div>的身高相同
<div class="parent">
<span class="child">Yes mom, I did my homework lol</span>
</div>
You should then add the CSS rules
然后你应该添加 CSS 规则
.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }
Or you can target it with a child selector
或者您可以使用子选择器定位它
.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }
Background on my own use of this
我自己使用这个的背景
I ran into this similar issue where I needed to vertically center items in a mobile menu. I made the div and spans inside the same line height. Note that this is for a meteor project and therefore not using inline css ;)
我遇到了这个类似的问题，我需要在移动菜单中垂直居中项目。我在相同的行高内制作了 div 和 span。请注意，这是针对流星项目，因此不使用内联 css ;)
HTML
HTML
<div class="international">
<span class="intlFlag">
{{flag}}
</span>
<span class="intlCurrent">
{{country}}
</span>
<span class="intlButton">
<i class="fa fa-globe"></i>
</span>
</div>
CSS(option for multiple spans in a div)
CSS（div 中多个跨度的选项）
.international {
height: 42px;
}
.international > span {
line-height: 42px;
}
In this case if I just had one span I could have added the CSS rule directly to that span.
在这种情况下，如果我只有一个跨度，我可以将 CSS 规则直接添加到该跨度中。
CSS(option for one specific span)
CSS（一个特定跨度的选项）
.intlFlag { line-height: 42px; }
Here is how it displayed for me
这是它对我的显示方式
回答by Paul Sweatte
As in a similar question, use display: inline-blockwith a placeholder element to vertically center the span inside of a block element:
在一个类似的问题中，使用display: inline-block占位符元素来垂直居中块元素内部的跨度：
html, body, #container, #placeholder { height: 100%; }
#content, #placeholder { display:inline-block; vertical-align: middle; }<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="container">
<span id="content">
Content
</span>
<span id="placeholder"></span>
</div>
</body>
</html>Vertical alignment is only applied to inline elements or table cells, so use it along with display:inline-blockor display:table-cellwith a display:tableparent when vertically centering block elements.
垂直对齐仅适用于行内元素或表格单元格，因此在垂直居中块元素时将其与父元素一起使用display:inline-block或display:table-cell与display:table父元素一起使用。
References:
参考：
回答by DTS
To the parent div add a height say 50px. In the child span, add the line-height: 50px; Now the text in the span will be vertically center. This worked for me.
给父 div 添加一个高度，比如 50px。在子跨度中，添加 line-height: 50px; 现在跨度中的文本将垂直居中。这对我有用。
