使用表格和td将图片下方的文字居中

Question

我正在建立一个网站，并在其中添加了带有图片的表格，但无法在以下td单元格中将表格下方的文本居中。 我当前的代码将其向左偏移，而不是直接在其下方。 这是我的代码：

HTML：

<body>
<section>
<section id="pictures">
    <div>
        <img src="images/ritual4.jpg" id="slide" class="floatLeft" alt="This is a picture of a group of young men posing and smiling">
        <script language="JavaScript">slideIt();</script>
        <p>Ritual and Mills Music Mission</p>
        <img src="images/ossian.jpg" alt="This is a picture of a group of dressed up men posing with an older gentleman.">
        <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" alt="This is a picture of David, President of the Gamma Beta Chapter."></td>        
            <td><img src="images/matth.jpg" alt="This is a picture of Matt Halverson, Vice-President of the Gamma Beta Chapter."></td>      
            <td><img src="images/zack.jpg" alt="This is a picture of Zack Bartsch, Secretary of the Gamma Beta Chapter."></td>      
            <td><img src="images/jacobandpete.jpg" alt="This is a picture of Jacob Walter, Tresurer of the Gamma Beta Chapter."></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);
}

Answer 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" alt="This is a picture of David, President of the Gamma Beta Chapter."></td> <td><img src="images/matth.jpg" alt="This is a picture of Matt Halverson, Vice-President of the Gamma Beta Chapter."></td> <td><img src="images/zack.jpg" alt="This is a picture of Zack Bartsch, Secretary of the Gamma Beta Chapter."></td> <td><img src="images/jacobandpete.jpg" alt="This is a picture of Jacob Walter, Tresurer of the Gamma Beta Chapter."></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> 

Answer 2

如果您尝试水平居中，可以尝试

#center{
    display: table-cell;
    position: absolute; // position p tag absolute
    vertical-align: center;
    font-size: 12px;
    margin-left: 0; // remove the margin
}

这应该可以解决问题。