使用表格和 td 在图像下方居中文本
Posted
技术标签:
【中文标题】使用表格和 td 在图像下方居中文本【英文标题】：Centering text below an image using a table and td 【发布时间】：2016-03-11 09:25:11 【问题描述】：我正在创建一个网站，我正在添加一个包含图片的表格，但我无法将表格下方的文本置于以下 td 单元格的中心。我当前的代码向左偏移，而不是直接在其下方。这是我的代码：
html：
<body>
<section>
<section id="pictures">
<div>
<img src="images/ritual4.jpg" id="slide" class="floatLeft" >
<script language="javascript">slideIt();</script>
<p>Ritual and Mills Music Mission</p>
<img src="images/ossian.jpg" >
<p>Spaghetti Dinner Fall 2015</p>
</div>
</section>
<section id="main">
<h1>Members</h1>
<hr>
<div class="title">
<table>
<tr>
<td><img src="images/david.jpg" ></td>
<td><img src="images/matth.jpg" ></td>
<td><img src="images/zack.jpg" ></td>
<td><img src="images/jacobandpete.jpg" ></td>
</tr>
<tr>
<td><p id="center">XXX</p></td>
<td><p id="center">XXX</p></td>
<td><p id="center">XXX</p></td>
<td><p id="center">XXX</p></td>
</tr>
CSS：
.title
text-align: center;
width:100%;
table
margin-right: auto;
margin-left: 45px;
border-width: 1px;
#center
display: table-cell;
vertical-align: center;
font-size: 12px;
margin-left: 115px;
td img
display: table-cell;
vertical-align: center;
width:55%;
height:5%;
ms-transform: rotate(90deg); /* IE 9 */
webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
【问题讨论】：
您是要使文本垂直居中还是水平居中？ 【参考方案1】：您的 html 有一些您需要解决的缺陷，例如设置多个具有相同名称的 id，例如具有“center”的 p 标签，因此我取出“table”部分来展示如何使文本居中。
td img
width:55%;
height:25%;
td, p
text-align: center
<table>
<tr>
<td><img src="images/david.jpg" ></td>
<td><img src="images/matth.jpg" ></td>
<td><img src="images/zack.jpg" ></td>
<td><img src="images/jacobandpete.jpg" ></td>
</tr>
<tr>
<td><p class="center">XXX</p></td>
<td><p class="center">XXX</p></td>
<td><p class="center">XXX</p></td>
<td><p class="center">XXX</p></td>
</tr>
</table>【讨论】：
【参考方案2】：如果你想水平居中，你可以试试
#center
display: table-cell;
position: absolute; // position p tag absolute
vertical-align: center;
font-size: 12px;
margin-left: 0; // remove the margin
这应该可以解决问题。
【讨论】：
以上是关于使用表格和 td 在图像下方居中文本的主要内容，如果未能解决你的问题，请参考以下文章