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

我正在制作网站，并且正在添加一张带有图片的表格，而且我无法将文本置于下列td单元格中的表格下方。我目前的代码已经偏移到左侧，而不是直接在它的下面。这里是我的代码：使用表格和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); 
}

来源

2015-12-06 John

你们是不是要垂直或水平居中文本？ – AdamMcquiff

如果你正试图水平居中，你可以尝试

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

这应该做的伎俩。

来源

2015-12-06 22:11:24 AdamMcquiff

你的html有一些缺陷需要解决，比如设置多个id，像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>

来源

2015-12-06 22:11:46 LGSon

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

回答

相关问题