blocks|key|698480|text|<td+align="center">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|698481|或者通过css，这不再是首选的方法...|unstyled|698482|<td+style="text-align:+center;">|698483|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;td align="center"&gt;
</code></pre>

<p>or via css, which is the preferred method any more...</p>

<pre><code>&lt;td style="text-align: center;"&gt;
</code></pre>


blocks|key|698691|text|在css中对html5执行此操作的简单方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|698692|td+img{
++++display:+block;
++++margin-left:+auto;
++++margin-right:+auto;

}|code-block|syntax|javascript|698693|对我来说效果很好。|698694|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Simple way to do it for html5 in css:</p>

<pre><code>td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}
</code></pre>

<p>Worked for me perfectly.</p>


blocks|key|482794|text|使用margin在td中居中放置一个div，诀窍是使div的宽度与图像的宽度相同。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|482795|<td>
++<div+style="margin:+0+auto;+width:+130px">
++++<img+src="me.jpg"+alt="me"+style="width:+130px"+/>
++</div>
</td>|code-block|syntax|javascript|482796|entityMap^0|2|6|9|2|Q|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

<p>Center a div inside <code>td</code> using <code>margin</code>, the trick is to make the <code>div</code> width the same as the image width.</p>
<pre><code>&lt;td&gt;
  &lt;div style=&quot;margin: 0 auto; width: 130px&quot;&gt;
    &lt;img src=&quot;me.jpg&quot; alt=&quot;me&quot; style=&quot;width: 130px&quot; /&gt;
  &lt;/div&gt;
&lt;/td&gt;

</code></pre>


blocks|key|482676|text|<table+style="width:100%25;">
<tbody+><tr><td+align="center">
<img+src="axe.JPG"+/>
</td>
</tr>
</tbody>
</table>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|482677|或|unstyled|482678|td
{
++++text-align:center;
}|482679|在CSS文件中|482680|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>&lt;table style="width:100%;"&gt;
&lt;tbody &gt;&lt;tr&gt;&lt;td align="center"&gt;
&lt;img src="axe.JPG" /&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>or </p>

<pre><code>td
{
    text-align:center;
}
</code></pre>

<p>in the CSS file</p>


blocks|key|698569|text|这解决了我的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|698570|<style>
.super-centered+{
++++position:absolute;+
++++width:100%25;
++++height:100%25;
++++text-align:center;+
++++vertical-align:middle;
++++z-index:+9999;
}
</style>

<table+class="super-centered"><tr><td+style="width:100%25;height:100%25;"+align="center"+++++valign="middle"+>+
<img+alt="Loading+..."+src="/ALHTheme/themes/html/ALHTheme/images/loading.gif">
</td></tr></table>|code-block|syntax|javascript|698571|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This fixed issues for me:</p>

<pre><code>&lt;style&gt;
.super-centered {
    position:absolute; 
    width:100%;
    height:100%;
    text-align:center; 
    vertical-align:middle;
    z-index: 9999;
}
&lt;/style&gt;

&lt;table class="super-centered"&gt;&lt;tr&gt;&lt;td style="width:100%;height:100%;" align="center"     valign="middle" &gt; 
&lt;img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif"&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
</code></pre>


blocks|key|698502|text|在你的css中设置一个固定的图片，并在图片上添加一个边距/填充(auto-auto/padding)到...|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|698503|div.image+img+{
++++width:+100px;
++++margin:+auto;
}|code-block|syntax|javascript|698504|或将text-align设置为居中...|698505|td+{
++++text-align:+center;
}|698506|entityMap^0|W|4|11|4|0|0|2|A|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>Set a fixed with of your image in your css and add an <code>auto</code>-margin/padding on the image to... </p>

<pre><code>div.image img {
    width: 100px;
    margin: auto;
}
</code></pre>

<p>Or set the <code>text-align</code> to center...</p>

<pre><code>td {
    text-align: center;
}
</code></pre>


blocks|key|698696|text|td+image+
{
++++display:+block;
++++margin-left:+auto;
++++margin-right:+auto;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|698697|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>td image 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</code></pre>


blocks|key|482862|text|另一个选项是使用<th>而不是<td>。<th>默认为居中；<td>默认为left。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|482863|entityMap^0|8|4|F|4|K|4|U|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<p>Another option is the use <code>&lt;th&gt;</code> instead of <code>&lt;td&gt;</code>. <code>&lt;th&gt;</code> defaults to center; <code>&lt;td&gt;</code> defaults to left.</p>


blocks|key|482775|text|根据我在互联网上的分析和搜索，我也找不到一种使用<div>将图像垂直居中的方法。只能使用<table>，因为表格提供了以下属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|482776|valign="middle"|code-block|syntax|javascript|482777|entityMap^0|O|5|18|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>As per my analysis and search on the internet also, I could not found a way to centre the image vertically centred using <code>&lt;div&gt;</code> it was possible only using <code>&lt;table&gt;</code> because table provides the following property:</p>

<pre><code>valign="middle"
</code></pre>


<p>I've been trying to align an image to the center of the table td. It worked with setting margin-left to a specific value but it also increased the size of td too and that isn't exactly what I wanted</p>

<p>Is there any efficient ways of doing this? I used percentages for the height and witdh of the table.</p>


Center image in table td in CSS

我一直在尝试将图像与桌子td的中心对齐。它可以将空白区-left设置为一个特定值，但它也增加了td的大小，而这并不是我想要的有什么有效的方法可以做到这一点吗？我用百分比表示桌子的高度和宽度。

问CSS中表td中的居中图像
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中表td中的居中图像EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中表td中的居中图像
EN