Question

我在div中有一个div和image以及h2标记。我希望垂直对齐h2标签。我试过了

vertical-align:middle
display:table-cell;

但不适合我。我不想使用行高或填充，因为有些时候我有很长的标题，所以它必须是中心，如果它包裹在2行。这是代码，

<div style="float:left;width:100%;margin:10px 43px;">
   <img width="60" style="float:left" src="http://coachfxlive.com/assets/channels/102x102/559bb0556fe02.jpg">
   <h2 style="width: 87%;float: left;margin:0 0 0 10px; vertical-align:middle;display:table-cell; ">Coaching 3-5 year old players</h2>
</div>

Answer 1

移除浮子。 Floating将其从文档的正常流程中取出。另外，请使用inline-block代替table-cell。我简化了这个演示的代码：

http://codepen.io/anon/pen/Yyqjxj

div{
  max-width: 400px;
}

img, h2{
  vertical-align: middle;
  display: inline-block;
}

<div>
   <img src="http://placehold.it/80x80">
   <h2>Coaching 3-5 year old players</h2>
</div>

垂直对齐中间不使用h2和img标签

1 个答案: