У меня проблема с созданием моего портфолио. Так что у меня есть мои фотографии внутри таблиц, и я сосредоточил их в CSS. По какой-то причине, когда я добавил заголовок и новую таблицу с новой фотографией, новая таблица почему-то не центрируется. Он центрируется, когда я открываю его на вкладке и уменьшаю вкладку, но когда она настолько велика, насколько это возможно, нет. Как я мог это исправить? Вот мой код:
td {
list-style-image: none;
list-style-type: none;
margin: auto;
display: inline-block;
position: relative;
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding: 0;
text-align: center;
}
.gallery:hover {
-webkit-box-shadow: 2px 1px 20px 4px #707070;
margin: 0;
padding: 0;
box-shadow: 2px 1px 20px 4px #707070;
}
img {
width: auto;
height: 200px;
text-align: center;
clear: none;
float: left;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
font-family: changa-one;
font-style: normal;
margin-top: 15px;
margin-bottom: 15px;
padding: 0;
font-weight: 400;
text-transform: uppercase;
}
<h1>Photography</h1>
<table>
<tbody>
<tr>
<td><a href="img/1_big.jpg" target="_blank"><img src="https://placehold.it/500x500" alt="" width="500" height="500" class="gallery"/></a></td>
<td><a href="img/2_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/3_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/4_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/5_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/6_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/8_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/9_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/10_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/11_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/12_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="img/13_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
</tr>
</tbody>
</table>
<h1>Websites</h1>
<table>
<tbody>
<tr>
<td><a href="webs1/index.html" target="_blank"><img src="https://placehold.it/500x500" alt="" width="500" height="500" class="gallery"/></a></td>
<td><a href="webs2/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="webs3/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
<td><a href="webs4/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
</tr>
</tbody>
</table>