Question

我试图在1 <td>内对图像和文字进行垂直对齐。我知道如果我将图像放在1 <td>而文本放在另一个中，它只是被复制并且有大约50行，这可以工作。基本的HTML：

<td>
  <img src="img.png" /><strong>Headline!</strong><br />Supporting blurb, not bolded.
</td>

css在这里：

td {
    padding: 0.5em 0;
    text-align: left;
    vertical-align: middle;
}

td img {
    float: left;
    margin-right: 1em;
    max-width: 48px;
    vertical-align: middle;
    width: 20%;
}

好的，所以在当前状态下，img（比文本高）是垂直对齐的，但文本似乎与顶部对齐。如果我取出br并将文本行放在单独的p标签中，它看起来是一样的。如果我将浮标从img上移开，它和强文本都是垂直居中的，但是在它之后它明显地进入了一条新线，这是在图像下面。我希望它能同时将img和文本垂直对齐...但是要使文本在强标记之后转到新行。

我看了很多答案，没有任何作用。

Answer 1

这很好用（你错过了<table></table>）：

＆＃13;

$(document).ready(function() {
  var textHeight = $("#text-container").height();
  var imgHeight = $("table td img").height();
  var padding = (imgHeight - textHeight)/2;
  $("#text-container").css('padding-top',padding + 'px');  
});

＆＃13;

td {
  padding: 0.5em 0;
  text-align: left;
  height: 100px;
  background-color: red;
}
td img {
  float: left;
  vertical-align: middle;
  margin-right: 1em;
  max-width: 48px;
  width: 20%;
  height:auto;
}

#text-container {
  float:right;
  padding-top:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <td>
    <img src="http://placehold.it/50x100">
    <div id="text-container">
        <strong>Headline!</strong>
        <br />Supporting blurb, not bolded.
    </div>
  </td>
</table>

＆＃13;

也在使用JSFiddle：http://jsfiddle.net/33xyt4ok/

显然删除/添加所需的正确高度，只需使用100px来显示vertical-align正在运行。

垂直对齐在表内

1 个答案: