在div中垂直对齐文本

小编典典

在div中垂直对齐文本

css

下面的代码（也可以在JSFiddle上作为演示使用没有将文本放在中间，正如我理想中的那样。div即使使用margin- top属性，我也找不到任何方法可以使文本垂直居中。我怎样才能做到这一点？

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>



#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}

#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}

阅读 299

2020-05-16

共1个答案

小编典典

创建一个用于文本内容的容器，span也许是。

#column-content {

  display: inline-block;

}

img {

  vertical-align: middle;

}

span {

  display: inline-block;

  vertical-align: middle;

}



/* for visual purposes */

#column-content {

  border: 1px solid red;

  position: relative;

}


<div id="column-content">



  <img src="http://i.imgur.com/WxW4B.png">

  <span><strong>1234</strong>

    yet another text content that should be centered vertically</span>

</div>

JSFiddle

2020-05-16