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，例如p标签有“center”，所以我拿出了“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
}

这应该可以解决问题。

使用表格和td将图像置于图像下方

2 个答案: