文本对齐未按预期工作答案

【问题标题】：text-align not working as expected文本对齐未按预期工作
【发布时间】：2017-01-21 02:05:53
【问题描述】：

我正在尝试在其容器的不同侧面制作两个元素。在我的实际代码中，这两个元素将位于 div 的两侧，但为了举例，假设我希望它们位于浏览器窗口的两侧。

所以我做了一个简单的：

<html>
<head>
</head>
<body>
<table>
<tr>
<td style="width: 50%;text-align: left;">
This should go left
</td>
<td style="width: 50%;text-align: right;">
This should go right
</td>
</tr>
</table>
</body>
</html>

例如：http://jsbin.com/ocete/

好吧，我不完全确定如何使用 div 很好地做到这一点。同样在右对齐的表格单元格中，我的实际代码中将有两个元素。一个是图像，一个是文本。我希望它们位于它们所在的 <td> 的相对两侧。

我怎样才能以我想要的方式做到这一点？我没有看到任何直接的方式。（请不要推荐固定定位）

【问题讨论】：

在桌子上设置border=1会告诉你。 ;-)
我已经在答案中解释了如何在右对齐单元格中制作图像和文本。看看吧。

标签： html css html-table text-alignment

【解决方案1】：

在您的 <table> 元素中，添加：

style="width: 100%"

一切正常，只是你的桌子不够大，看不到它。

【讨论】：

+1，确实如此。并且打开边界会让 OP 立即意识到发生了什么。
同时设置table-layout: fixed 告诉浏览器你是认真的，这样它就不会为你“帮助”改变单元格的宽度。（这也渲染得更快。）

【解决方案2】：

如果您希望将图像与文本并排放置在表格的两侧，您可以使用以下方法：

<table style="width: 100%">
<tr>
<td style="text-alight: left;">
text
</td>
<td style="text-align: right;">
  <table style="width: 100%">
    <tr>
      <td style="text-align: left;">image</td>
      <td style="text-align: right;">text</td>
    </tr>
  </table>
</td>
</tr>
</table>

这应该会让你得到类似的东西

-----------------------------
|text    |image    |    text|
-----------------------------

【讨论】：

【解决方案3】：

您没有为您的表格指定宽度，所以它只有需要的宽度，因此您看不到文本对齐有什么不同。

试试这个

<table style="width: 100%">

再看看。

【讨论】：

【解决方案4】：

有什么理由使用表格进行布局？使用两个 divs 代替，将它们的宽度设置为 50%，然后将第二个 div 浮动到右侧。

【讨论】：

向该表添加第三个单元格。很琐碎吧？浮动 div 不是那么简单。
@earlz：好吧，取决于。 HTML 代码很简单。 CSS 代码只是稍微复杂一些——只需在divs 中添加适当的边距。当您想让所有 divs 具有相同的高度时，就会出现真正的问题，而不管它们的内容高度如何——但也存在（纯 CSS）解决方案。

【解决方案5】：

为您的表格添加宽度..

<table style="width: 100%">

编辑：太慢了

【讨论】：

【解决方案6】：

你总是要使用桌子吗？如果是这样，上述答案将起作用。但是如果你在一个容器 div 中使用了两个 div，则需要将内部 div 分别向左和向右浮动，然后清除容器 div 中的浮动。

【讨论】：