浮動元素內的垂直居中對齊圖標

Question

我在這里找到了很多有關此問題的答案，並在沒有運氣的情況下對其進行了嘗試。

如何將所有三個圖標的垂直對齊設置為居中/居中？

這是： Jsfiddle演示

 .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> 

Answer 1

看起來您在容器和圖標上都使用了固定高度 ，因此您可以為其設置一些margin 。 容器的高度為24px ，圖標為16px (24-16)/2=4 。

.ico {
    margin-top: 4px;
}

https://jsfiddle.net/9p2fd0kL/7/

 .ico {margin-top:4px;} /*ADDED*/ .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> 

Answer 2

最簡單的答案是使用flexbox。 它是針對此類問題而設計的。 Flexbox很不錯，因為即使您更改高度，它也可以使圖標居中。 無需計算。 當您使用流體高度時，它甚至可以工作。 這是Chris Coyier在css-tricks上制作的一個不錯的備忘單 ，其中包含flexbox提供的更多選項。 以防萬一，這里是支持表 。

您需要做的只是display: flex和align-items: center在.BNav2的css規則中.BNav2 。 其余的由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> 

Answer 3

為什么不只使用display: table放在身體上，然后將所有東西放在容器中：

您的小提琴在這里更新

的CSS

body {          /* <-- you could use a div instead of body if you want */
    position:absolute; 
    display: table;    
    height:100%; 
    width:100%;
    margin:0;
    ...
}

#container {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

的HTML

<body>
    <div id="container">
         All your vertically aligned content here
    </div>
</body>