在浮动元素内垂直居中对齐图标

时间：2015-07-14 18:36:07

标签： html css

我在这里找到了很多关于这个问题的答案，并在没有运气的情况下尝试了这个问题。

如何将所有三个图标的垂直对齐设置为居中/中间？

以下是：Jsfiddle Demo

＆＃13;
＆＃13; 
.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}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

最简单的答案是使用flexbox。它专为像这样的问题而设计。 Flexbox很不错，因为即使你改变了高度，它也可以使你的图标居中。无需计算。它甚至可以在您使用液体高度时起作用。克里斯·科伊尔（Chris Coyier）在css-tricks中有一个很好的cheat sheet，其中有更多选项。以防万一support tables。

您需要做的只是将display: flex和align-items: center放入.BNav2的css规则中。 Flexbox完成其余工作！

＆＃13;
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

为什么不在身体上使用display: table并将所有东西放在容器中：

Your Fiddle updated here

<强> 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>
相关问题
最新问题