在同一表格单元格中将文本垂直和水平居中放置，图像向左浮动 [英] centering text vertically and horizontally in same table cell with image floated left

问题描述

我知道这可能看起来有点问题。只是感觉应该有一个简单的解决方案。我有一种感觉，我是SOL，但我想我要先问一下。

I know this probably seems like a little problem. It just feels like there should be an easy solution. I have a feeling I'm SOL but I figured I'd ask first.

http://jsfiddle.net/bczengel/FSDz9/5/

当图像未浮动时，它具有所需的最终结果，图像和文本均垂直居中。当您将图片向左浮动时，图片会垂直居中，并且文本与图片的顶部对齐。

When the image is not floated left it has the desired end result where the image and the text are both vertically centered. When you float the image left the image is vertically centered and the text is aligned with the top of the image.

• 一个表单元格


• 仅具有给定html的CSS（或对html的最小更改）


• 我想避免使用行高解决方案，因为样式表已应用于许多现有页面，其中某些页面的文本中包含多行

推荐答案

只需很小的html更改（将标题文本包装在< p> 中）

with a minimal html change (wrapping your title text in a <p>)

table {
    width: 500px;
    border: solid 1px black;
}

table td {
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    position: relative;
}

table td img {
    width: 50px;
    vertical-align: middle;
    display: inline-block;
}

table td p {
    display: inline-block;
    width: 430px;
    background: #ccc;
    vertical-align: middle
}

<table>
  <tr>
    <td>
      <img alt="test" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ-nkjB-srUT_dc7brfRDiDSVu8BQa_6TEbQYevP1gy2UkTdcXWzg" />
      <p>Title Text</p>
    </td>
  </tr>
</table>

<br /><br />

<table>
  <tr>
    <td>
      <img alt="test" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ-nkjB-srUT_dc7brfRDiDSVu8BQa_6TEbQYevP1gy2UkTdcXWzg" />
      <p>Title Text <br /> on the next line</p>
    </td>
  </tr>
</table>

这篇关于在同一表格单元格中将文本垂直和水平居中放置，图像向左浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！