如何在 div 内垂直居中 <span>? [复制]
Posted
技术标签:
【中文标题】如何在 div 内垂直居中 <span>? [复制]【英文标题】:How to vertically center a <span> inside a div? [duplicate] 【发布时间】:2011-05-20 10:18:34 【问题描述】:代码:
<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>
现在渲染时,span 对齐 div 的左下角。
【问题讨论】:
【参考方案1】:请参阅我在understanding vertical alignment 上的文章。在讨论结束时,有多种技术可以实现您想要的。
(超短总结:要么将子元素的行高设置为容器的高度,要么在容器上设置定位并将子元素绝对定位在top:50%
和margin-top:-YYYpx
, YYY是孩子已知身高的一半。)
【讨论】:
@Blender Heh,尽管其中引用了第三个选项:display:table-cell; vertical-align:middle
(以及 display:table-row
父级)。 :) 但是不,你可以肯定我会never advocate using html table elements for layout。
那么如果你想在没有固定高度的情况下做到这一点,没有办法做到吗?
@Kyralessa 不,如果您没有固定的内容高度,则存在一些尚未在我的页面中列出的技术。例如,请参阅:css-tricks.com/centering-in-the-unknown
@Phrogz - 您应该将css-tricks.com/centering-in-the-unknown 中的最后一个选项添加到您的答案中。太干净了,而且 ie8+!
如果YYY
未知怎么办??【参考方案2】:
在你的父 DIV 添加
display:table;
并在您的子元素处添加
display:table-cell;
vertical-align:middle;
【讨论】:
这行得通,但是是否有一种简单的方法也可以将父元素中的子元素水平居中?由于孩子的显示不再是内联块,父母的“文本对齐:中心;” CSS 不再有效。【参考方案3】:单行跨度快速解答
使子级(在本例中为跨度)line-height
与父级 <div>
的高度相同
<div class="parent">
<span class="child">Yes mom, I did my homework lol</span>
</div>
然后您应该添加 CSS 规则
.parent height: 20px;
.child line-height: 20px; vertical-align: middle;
或者你可以使用子选择器来定位它
.parent height: 20px;
.parent > span line-height: 20px; vertical-align: middle;
我自己使用这个的背景
我遇到了类似的问题,我需要将移动菜单中的项目垂直居中。我在同一行高内制作了 div 和 span。请注意,这是针对流星项目的,因此不使用内联 css ;)
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(div 中多个跨度的选项)
.international
height: 42px;
.international > span
line-height: 42px;
在这种情况下,如果我只有一个跨度,我可以将 CSS 规则直接添加到该跨度。
CSS(一个特定跨度的选项)
.intlFlag line-height: 42px;
这是我的显示方式
【讨论】:
为高质量的子 div 示例文本点赞。【参考方案4】:As in a similar question,使用带有占位符元素的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>
垂直对齐仅适用于inline elements or table cells,因此在垂直居中块元素时将其与display:inline-block
或display:table-cell
一起使用,并带有display:table
父级。
参考资料:
CSS Horizontal and Vertical Centering
【讨论】:
只要不包装#content,该解决方案就可以工作【参考方案5】:向父 div 添加一个高度,例如 50 像素。在子跨度中,添加 line-height: 50px; 现在跨度中的文本将垂直居中。这对我有用。
【讨论】:
以上是关于如何在 div 内垂直居中 <span>? [复制]的主要内容,如果未能解决你的问题,请参考以下文章