twitter-bootstrap 在 TD 内垂直对齐跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22218805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically Align a Span within a TD
提问by mattkgross
I am running into some troubles with CSS formatting of table columns with bootstrap. A normal tdlooks like this:
我在使用引导程序对表格列进行 CSS 格式设置时遇到了一些麻烦。一个正常的td看起来像这样：
<td style="vertical-align: middle; font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil" style="vertical-align: top !important;"></span>
Content
</td>
With the edit-iconclass looking like:
随着edit-icon类看起来像：
.edit-icon {
float: right;
padding-top: 3px;
padding-right: 3px;
}
Ideally, the content in the cell should be centered vertically and the icon should be in the top right corner. I've tried for hours, but to no avail, to figure out how to align one element to the middle vertically and one element to the top vertically in the same cell.
理想情况下，单元格中的内容应垂直居中，图标应位于右上角。我已经尝试了几个小时，但无济于事，想弄清楚如何在同一单元格中将一个元素垂直对齐到中间，将一个元素垂直对齐到顶部。
To help further display the problem, here is the current look:
为了帮助进一步显示问题，这是当前的外观：
Here is what I'm looking for:
这是我要找的：
Any help with how to solve this CSS conundrum would be greatly appreciated!
任何有关如何解决这个 CSS 难题的帮助将不胜感激！
回答by acarlon
Single cell
单细胞
One way to do this is to make the span position absolute. See this fiddle.
一种方法是使跨度位置绝对。看到这个小提琴。
The changes are (the height and width are just for demonstration):
变化是（高度和宽度仅用于演示）：
CSS:
CSS：
table
{
position:relative;
}
td
{
height:300px;
width:300px;
background-color:grey;
}
span
{
top:5px;
right:5px;
position:absolute;
height:100px;
width:100px;
background-color:red;
}
HTML:
HTML：
<table>
<td style="vertical-align: middle; font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil"> </span>
Content
</td>
</table>
The table position is relative, so that this is the position that the span will base its absolute position from.
表格位置是相对的，因此这是跨度将其绝对位置作为基础的位置。
Multiple Cells
多个单元格
Now, the only problem with that is that it doesn't work so well when you have multiple table cells because the image will always be using the table for the offset point. So, you need to make the position relative to the td. However, this is not simple. See herefor a way to do this. Essentially it involves putting another div inside the td that fills the td and then using that for the position. Also, you want to preserve center text. See herefor a discussion on centering vertically. Another approach is to set the table cell to position to block. However, if you do that then you lose the vertical centering of the text. A nice solution is to use a transform (note the supported browsers on mdn).
现在，唯一的问题是当您有多个表格单元格时它不能很好地工作，因为图像将始终使用表格作为偏移点。因此，您需要相对于td. 然而，这并不简单。请参阅此处了解执行此操作的方法。本质上，它涉及在填充 td 的 td 中放置另一个 div，然后将其用于该位置。此外，您希望保留中心文本。有关垂直居中的讨论，请参见此处。另一种方法是将表格单元格的位置设置为block。但是，如果您这样做，则会丢失文本的垂直居中。一个不错的解决方案是使用转换（注意mdn上支持的浏览器）。
This fiddleshows it working for multiple table cells. Basically: -
这个小提琴显示它适用于多个表格单元格。基本上： -
tddisplay:blockmeans that it can be the relative point..contentwraps the text that needs to be centered vertically.transformshifts the content up by half its height from the center of thetd, so it is in the middle.
tddisplay:block意味着它可以是相对点。.content包装需要垂直居中的文本。transform将内容从 的中心向上移动一半高度td，因此它位于中间。
CSS:
CSS：
td
{
position:relative;
display:block;
height:300px;
width:300px;
background-color:grey;
}
span
{
position:absolute;
top:5px;
right:5px;
height:100px;
width:100px;
background-color:red;
}
.content
{
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
HTML:
HTML：
<table>
<tr>
<td style="font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil"> </span>
<div class="content">
<p>Content</p>
<p>More content</p>
<p>Even more content</p>
<p>So much more content</p>
</div>
</td>
</tr>
<tr>
<td style="font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil"> </span>
<div class="content">
<p>Content</p>
<p>More content</p>
<p>Even more content</p>
<p>So much more content</p>
</div>
</td>
</tr>
</table>
