Я пытался центрировать изображения в div на моей странице.
Соответствующий HTML:
<div class="imgblock">
<div class="basket slide1"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/basket.jpg" alt="" align="center"/ </div>
<div class="infos"></div>
</div>
</a></div>
<div class="steak slide2"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/steak.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
<div class="col1-4 slide3"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/breakfast.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
<div class="fish slide4"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/fish.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
</div>
Соответствующий CSS:
.imgblock {
width:940px;
text-align:center;
vertical-align:middle;
margin:0 10px;
}
В моем исследовании мне сказали добавить text-align: center и vertical-align: middle. Это не сработало, я также попробовал margin-left: auto и margin-right: auto.
Спасибо за вашу помощь.
поскольку ваш образ плавает, вы можете уменьшить ширину .imgblock
и использовать автоматическую маржу:
.imgblock {
width:830px;
margin:0 auto;;
}
Как сказал @mdesdev, рекомендуемый способ сосредоточиться на элементах блока:
margin: 0 auto;
Это также касается ваших изображений. Я бы сделал что-то вроде этого (непроверенный):
.imgblock img{
display: block;
margin: 0 auto;
}
Вы, вероятно, могли бы обойтись и без окружающего div.
можешь попробовать
.basket {
margin: 0 10px 0 320px;
width: 300px;
}