Question

我有一些th元素，其中包含文本，应该居中并且还包含图片：

alt text

向上/向下箭头图形是单独的图像。

我的问题是，在保持文字居中的同时，将图像定位到th元素右侧的最简单可靠方法是什么？

如果有一个相当简单的方法，我愿意使用jQuery / JavaScript。

有一点需要注意：我需要将上/下图形作为单独的图像，而不是标题背景的一部分。

        <th> 
          Title
          <img src='/images/sort_unsorted.jpg' /> 
        </th>

Answer 1

只需将图像浮动到右侧：

th img {
    float: right;
}

DEMO： http://jsfiddle.net/marcuswhybrow/ZxUMY/

Answer 2

您希望文本如何居中，从th的左/右边缘或从th的左边缘到图像左侧等距离？两者之间存在细微差别，因为您的图像相对较小，但仍然存在明显差异。

与图像相距不远，解决方案很简单（正如Marcus所说）：

th img { float:right; }

等距th边缘需要更多，因为你需要将图像从页面流中分离出来：

th {
  display:block;
  position:relative;
  text-align:center;
}
th img {
  position:absolute;
  right:0;
  /* optional, for vertically centering the image
  top:50%;
  margin-top:-[image height/2]px;
  */
}

编辑：修复了在桌面单元格中的定位（感谢布兰登），这里有一个简单的小提琴： http://jsfiddle.net/brillyfresh/4LDZ9/

Answer 3

为了更好地处理定位（如果您不想使用背景图像），您必须将内容包装在块级元素中，如DIV。您不能在表格单元格的子元素上使用position: absolute;。

所以，我推荐这样的东西：

<强> HTML：

<table cellpadding="0" cellspacing="0">
    <thead>
        <th>
            <div class="positioning">
                Left
                <div class="img">&nbsp;</div>
            </div>
        </th>
        <th>
            <div class="positioning">
                Center
                <div class="img">&nbsp;</div>
            </div>
        </th>
        <th>
            <div class="positioning">
                Right
                <div class="img">&nbsp;</div>
            </div>
        </th>
    </thead>
    <tbody>
        <td>Left</td>
        <td>Center</td>
        <td>Right</td>
    </tbody>
</table>

想象一下，<div class="img"> </div>只是一张12px x 12px的图像。

<强> CSS

table {
    border: 10px solid rgb(230,230,230);
    color: white;
}
table thead th,
table tbody td {
    background: black;
    border: solid 1px white;
    font: bold 12px Helvetica, Arial, sans-serif;
    padding: 10px;
}
table thead th {
    padding: 0;
    text-align: center;
}
table thead .positioning {
    padding: 10px 32px;
    position: relative;
}
table thead .img {
    background: red;
    height: 12px;
    margin-top: -6px;
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
}

这里要记住的重要一点是，你给positioning div的左侧和右侧足够的填充以为图像腾出空间（即：padding: 10px 32px;）。否则图像将与您的文本重叠。

这是一个小提琴：http://jsfiddle.net/brandondurham/nXQeR/

如何在同一元素中居中显示文本和右对齐图像？

3 个答案: