代码:
<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的左下角。
在类似的问题中,使用带有占位符元素的display: inline-block将块元素内部的span垂直居中:
Html, body, #container, #占位符{高度:100%;}
#内容,#占位符{显示:inline-block;vertical-align:中间;}
<!doctype html >
< html lang =“en”>
< >头
> < /头
身体< >
< div id = "容器" >
< span id = "内容" >
内容
< / span >
< span id = "占位符“> < / span >
< / div >
身体< / >
< / html >
垂直对齐只应用于内联元素或表格单元格,所以当垂直居中块元素时,它与display:inline-block或带有display:table父项的display:table-cell一起使用。
引用:
CSS水平和垂直居中
在类似的问题中,使用带有占位符元素的display: inline-block将块元素内部的span垂直居中:
Html, body, #container, #占位符{高度:100%;}
#内容,#占位符{显示:inline-block;vertical-align:中间;}
<!doctype html >
< html lang =“en”>
< >头
> < /头
身体< >
< div id = "容器" >
< span id = "内容" >
内容
< / span >
< span id = "占位符“> < / span >
< / div >
身体< / >
< / html >
垂直对齐只应用于内联元素或表格单元格,所以当垂直居中块元素时,它与display:inline-block或带有display:table父项的display:table-cell一起使用。
引用:
CSS水平和垂直居中
快速回答单线跨度
使子对象(在本例中为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; }
或者你可以用子选择器来瞄准它
.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中多个span的选项)
.international {
height: 42px;
}
.international > span {
line-height: 42px;
}
在这种情况下,如果我只有一个span,我可以直接将CSS规则添加到该span。
CSS(一个特定跨度的选项)
.intlFlag { line-height: 42px; }
下面是它对我的显示