我在这里找到了很多有关此问题的答案,并在没有运气的情况下对其进行了尝试。
如何将所有三个图标的垂直对齐设置为居中/居中?
这是:Jsfiddle Demo
.fl{float:left}
.fr{float:right}
.vm{vertical-align:middle}
.ico {display:inline-block;width:16px; height:16px; line-height:16px;
background :url('http://files.fbstatic.com/PostImages/2664562/0/b0617e92-af51-4ca9-9b2f-3225c7607441.png') 0 0 no-repeat}
.icoHome{background-position:-48px -160px}
.icoHome:hover{background-position:-48px -176px}
.icoPrev{background-position:-384px 0px}
.icoPrev:hover{background-position:-384px -16px}
.icoNext{background-position:-400px 0px}
.icoNext:hover{background-position:-400px -16px}
.CTitle {border-bottom:1px #e5e5e5 dashed; height:26px; line-height:27px; background-color:#FFFFDF;padding:2px;}
.BNav, .BNav2{line-height: 24px; display: block; border: 1px solid #ccc; color: navy; background-color: #CCFFFF; width: 90px;
height: 24px; text-align: center; border-radius: 20px; text-decoration: none;}
.BNav:hover, .BNav2:hover{color: green; background-color: lime}
.BNav2 {padding-left:2px; padding-right:2px; width:80px}
.BNav2:hover .icoHome{background-position:-48px -176px}
.BNav2:hover .icoMenu{background-position:-112px -16px}
.BNav2:hover .icoDel{background-position:-368px -16px}
.BNav2:hover .icoMove{background-position:-384px -48px}
.BNav2:hover .icoPrev{background-position:-384px -16px}
.BNav2:hover .icoNext{background-position:-400px -16px}
.BNav2:hover .icoLink{background-position:-400px -48px}
<div class="CTitle" style="clear:both; overflow:hidden">
<a class="BNav2 fl" title="Home" href="../A.html"> <!-- float:Left -->
<span class="ico icoHome fl vm"></span> <!--float:left, problem : how to align middle vertically-->
Test
</a>
<a class="BNav2 fl" title="Previous" href="../B.html"> <!-- float:left -->
<span class="ico icoPrev fl vm"></span> <!--float:left, problem : how to align middle vertically-->
Previous
</a>
<a class="BNav2 fr" title="Next" href="../C.html"> <!-- float:right -->
<span class="ico icoNext fl vm"></span> <!--float:left, problem : how to align middle vertically-->
Next
</a>
</div>
最佳答案
最简单的答案是使用flexbox。它是针对此类问题而设计的。 Flexbox很不错,因为即使您更改高度,它也可以使图标居中。无需计算。当您使用流体高度时,它甚至可以工作。这是Chris Coyier在CSS技巧中的一个不错的cheat sheet,其中包含flexbox的更多选项。以防万一,这是support tables。
您需要做的只是将display: flex
和align-items: center
放在.BNav2
的css规则中。其余的由Flexbox完成!
body {
color: #666;
font: 12px/20px'Open Sans', arial, Helvetica, sans-serif;
background: #CCD9C8;
-webkit-text-size-adjust: none;
}
body.page {
color: #bbb;
}
.fl {
float: left
}
.fr {
float: right
}
.vm {
vertical-align: middle
}
.ico {
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
background: url('http://files.fbstatic.com/PostImages/2664562/0/b0617e92-af51-4ca9-9b2f-3225c7607441.png') 0 0 no-repeat
}
.icoHome {
background-position: -48px -160px
}
.icoHome:hover {
background-position: -48px -176px
}
.icoPrev {
background-position: -384px 0px
}
.icoPrev:hover {
background-position: -384px -16px
}
.icoNext {
background-position: -400px 0px
}
.icoNext:hover {
background-position: -400px -16px
}
.CTitle {
border-bottom: 1px #e5e5e5 dashed;
height: 26px;
line-height: 27px;
background-color: #FFFFDF;
padding: 2px;
}
.BNav,
.BNav2 {
line-height: 24px;
display: block;
border: 1px solid #ccc;
color: navy;
background-color: #CCFFFF;
width: 90px;
height: 24px;
text-align: center;
border-radius: 20px;
text-decoration: none;
}
.BNav:hover,
.BNav2:hover {
color: green;
background-color: lime
}
.BNav2 {
padding-left: 2px;
padding-right: 2px;
width: 80px;
display: flex;
align-items: center;
}
.BNav2:hover .icoHome {
background-position: -48px -176px
}
.BNav2:hover .icoPrev {
background-position: -384px -16px
}
.BNav2:hover .icoNext {
background-position: -400px -16px
}
<div class="CTitle" style="clear:both; overflow:hidden">
<a class="BNav2 fl" title="Home" href="../A.html">
<span class="ico icoHome fl vm"></span> Test
</a>
<a class="BNav2 fl" title="Previous" href="../B.html">
<span class="ico icoPrev fl vm"></span> Previous
</a>
<a class="BNav2 fr" title="Next" href="../C.html">
<span class="ico icoNext fl vm"></span> Next
</a>
</div>
关于html - float 元素内的垂直居中对齐图标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31414645/