Центрирование текста под изображением с использованием таблицы и 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 имеет некоторые недостатки, которые вам нужно адресовать, например, установить несколько идентификаторов с таким же именем, как тег p, имеющий «центр», поэтому я достал часть «таблицы», чтобы показать, как центрировать текст.

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

ответ

Смежные вопросы