Html 如何在表格 td 中居中图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10043234/
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
How to center an image in a table td?
提问by sparkle
I want to center (center+middle) an image, and the title inside h2, in a table column (td)
我想在表列 (td) 中居中 (center+middle) 图像和 h2 中的标题
CSS
CSS
.centered
{
text-align:center;
}
HTML
HTML
<table class="table table-bordered">
<tbody>
<tr>
<td class="centered"><%= image_tag(prank.image_url, :size => "50x50") %></td>
<td class="centered"><h2><%=prank.category.titleize%></h2></td>
</tr>
I'm using Twitter Bootstrap
我正在使用 Twitter Bootstrap
回答by tim_brook
You could try:
你可以试试：
.centered { vertical-align:middle; text-align:center; }
.centered img { display:block; margin:0 auto; }
回答by Martin
N.B. align="center"is not supported in HTML 5; see http://www.w3schools.com/tags/tag_td.asp
NB align="center"在 HTML 5 中不受支持；见http://www.w3schools.com/tags/tag_td.asp
回答by Top Systems
This should work
这应该工作
.cntr
{
margin: 0 auto;
}
<div class="cntr" style="width: 130px">
<img src="me.jpg" alt="me" style="width: 130px" />
</div>
回答by Tim Garver
Here is how I did it. I call the base twitter css file. than after i call my default css file in my default file I have this class
这是我如何做到的。我调用基本的 twitter css 文件。比在我的默认文件中调用我的默认 css 文件之后我有这个类
.table-center th, .table-center td {
border-top: 1px solid #DDDDDD;
line-height: 18px;
padding: 8px;
text-align: center;
vertical-align: top;
}
then in my table i do this:
然后在我的桌子上我这样做：
<table class="table table-center ....">...</table>
回答by Joe
Try
尝试
.centered{width: 50px; margin: 0px, auto, 0px, auto;}
回答by Kamal
check this out http://jsfiddle.net/k6Nvk/1/
看看这个http://jsfiddle.net/k6Nvk/1/
just add in your <td>>> <td align="center" valign="middle"><image path></td>
只需添加您的<td>>><td align="center" valign="middle"><image path></td>
and you can also do this using css check DEMO
你也可以使用 css check DEMO来做到这一点
回答by Jakub
All you have to do is declare margin from left and right (top and bottom optional):
您所要做的就是从左侧和右侧声明边距（顶部和底部可选）：
.center {
margin-left: 25%;
margin-right: 25%;
}
Or you can just use
或者你可以只使用
.center
{
margin-left: auto;
margin-right: auto;
width: 20%;
}
If you don't have to just don't use <table>tag. Use <div>instead.
如果您不必，请不要使用<table>标签。使用<div>来代替。
回答by thomas
Give this a try, but not 100% sure if it'll work:
试试这个，但不能 100% 确定它是否有效：
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
回答by Atadj
I would try text-align: center;in inline style="".
我会尝试text-align: center;使用内联样式 =“”。
