Question

我试图在div中垂直对齐文本，但没有成功，块中的文本不是垂直对齐的。非常感谢你的帮助。

我的JQuery尝试：

$('.content_txt').each(function(){
          if($(this).find('a').height() > 45){
              if($(this).find('b').length > 0){
                $(this).find('b').css('margin-bottom','10px');
                $(this).css('height','auto');
              }                
          }else{
                $(this).css('height','60px');
          }
});

HTML：

<div class="ui-body content_txt" style="background-color: rgb(246, 246, 253); height: 60px;">
   <div>
     <h2 class="h2" style="margin-bottom: 0px;padding:0px;vertical-align:middle;">
      <a class="ui-link" href="/cz/cs/65_chystane-akce/2147_2014-iw-best-plants-conference.html?do=article"> 2014 IW Be...Conference </a>
     </h2>
     <span class="small2">
     <b>7.5.2014 | Milwaukee, WI (US)</b>
     </span>
     <br>
   </div>
</div>

Answer 1

试试这个css：

vertical-align:middle;

Answer 2

这取决于具体情况。如果您知道您的文本是一个衬里，并且容器的高度是静态的，那么您可以使用line-height来完成此操作。

否则我只会使用一个表并在你将文本（或div）放入的td上放置垂直对齐。

这是我所知道的最容易和最不熟练的方式。

Answer 3

使用display：table-cell和vertical-align：middle来完成此任务：

<div class="ui-body content_txt" style="background-color: rgb(246, 246, 253); height: 60px;">
   <div style="display:table-cell;vertical-align:middle;">
     <h2 class="h2" style="margin-bottom: 0px;padding:0px;vertical-align:middle;">
      <a class="ui-link" href="/cz/cs/65_chystane-akce/2147_2014-iw-best-plants-conference.html?do=article"> 2014 IW Be...Conference </a>
     </h2>
     <span class="small2">
     <b>7.5.2014 | Milwaukee, WI (US)</b>
     </span>
     <br>
   </div>
</div>

这将垂直对齐该div中心的所有内容

Answer 4

使用此CSS包含Div

display: table-cell;
vertical-align: middle;

如何垂直对齐div内的文本？

4 个答案: