如何垂直居中<span>在div里面?

代码:

<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的左下角。

441871 次浏览
小开
最佳答案

请参阅我在理解垂直对齐上的文章。有多种技巧可以在讨论结束时达到你想要的效果。

(超简短的总结:要么设置子对象的行高等于容器的高度，要么在容器上设置定位，并将子对象绝对定位在top:50%，其中margin-top:-YYYpx, YYY是子对象已知高度的一半。)

小开

在一个类似的问题中，使用带有占位符元素的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>

垂直对齐只应用于内联元素或表单元格，所以当块元素垂直居中时，将它与display:inline-block或带有display:table父元素的display:table-cell一起使用。

引用:

CSS水平和垂直居中

小开

在您的父DIV添加

display:table;

然后在子元素中添加

 display:table-cell;
vertical-align:middle;
小开
给父div添加一个高度，比如50px。在子跨度中，添加line-height: 50px; 现在跨度中的文本将垂直居中。

小开

快速回答单线跨度

使子对象(在本例中为span)的高度与父对象<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; }

< br >

或者你可以用子选择器来瞄准它

.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }

我自己使用这个的背景

当我需要在移动菜单中垂直居中时，我遇到了类似的问题。我让div和span在相同的行高内。注意，这是一个流星项目，因此不使用内联css;)

超文本标记语言

<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中多个span的选项)

.international {
height: 42px;
}


.international > span {
line-height: 42px;
}

在这种情况下，如果我只有一个span，我可以直接将CSS规则添加到该span。

CSS(一个特定跨度的选项)

.intlFlag { line-height: 42px; }

下面是它对我的显示

enter image description here


提交答案