Как центрировать несколько элементов <figure>в одной строке? - PullRequest
Новая
       60

Как центрировать несколько элементов <figure>в одной строке?

0 голосов
/ 06 мая 2020

Привет, члены переполнения стека,

У меня есть вопрос, аналогичный обсужденному в вопросе «Как центрировать несколько встроенных блочных элементов с помощью CSS?». К сожалению, предоставленные ответы мне не помогли, поэтому мне пришлось создать новый вопрос.

Я использую 4 элемента с фиксированной шириной и хотел бы выровнять их по центру в один ряд. Стиль text-align: center не влияет на div. 

<style>
.figurestyle {
  width:160px;
  padding-left:5px; 
  padding-right:5px;  
  margin-left:0px; 
  margin-right:0px;
  display:inline-block;
}
</style>

<div style="text-align:center;">
<figure class="figurestyle"><img src="img1.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text1</figcaption>
</figure>
<figure class="figurestyle"><img src="img2.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text2</figcaption>
</figure>
<figure class="figurestyle"><img src="img3.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text3</figcaption>
</figure>
<figure class="figurestyle"><img src="img4.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text4</figcaption>
</figure>
</div>

Кто-нибудь знает ответ? Заранее большое спасибо

ура, Бас

1 Ответ

0 голосов
/ 06 мая 2020

Я столкнулся с этой проблемой несколько дней, а go, собственно, и решил, используя display: flex;. Примерно так: 

<style>
.figurestyle {
  width:160px;
  padding-left:5px; 
  padding-right:5px;  
  margin-left:0px; 
  margin-right:0px;
}

.parentFigureStyle {

    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

</style>

<div class="parentFigureStyle">
<figure class="figurestyle"><img src="img1.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text1</figcaption>
</figure>
<figure class="figurestyle"><img src="img2.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text2</figcaption>
</figure>
<figure class="figurestyle"><img src="img3.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text3</figcaption>
</figure>
<figure class="figurestyle"><img src="img4.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text4</figcaption>
</figure>
</div>

В общем, вы должны просто сделать родительский <div> имеющим display: flex; и расположить его в ряд и выровнять содержимое по центру. Это должно сработать.

...