Почему сильные тексты во flexbox ведут себя как столбцы? - PullRequest
Новая
       29

Почему сильные тексты во flexbox ведут себя как столбцы?

0 голосов
/ 30 января 2019

Я недавно столкнулся с таким поведением и не могу понять, что его вызывает.Каждый текст между <strong></strong> ведет себя как столбцы (?) Внутри моего контейнера flexbox.

Пожалуйста, помогите, я полностью потерян!

Предварительный просмотр: enter image description here

HTML: 

<div id="item_desc" >
<strong>Text in strong</strong> 
nulla a laoreet nibh, at placerat leo. Proin uis condimentum ligula, ut 
viverra turpis. Morbu lamcorper consequat gravida. Aenean vestibulum urna id 
purus vulputate landit. Vivamus eleifend, erat quis dapibus pulvinar, eros 
justo commodo urpis, molestie commodo orci nisi maximus diam.   
Pellentesque posuere pulvinar malesuada. Nulla eu vestibulum erat.
Duis sit amet turpis id tellus eleifend faucibus nec non tellus. 
</div>

CSS: 

#item_desc {
    border:1px solid red;
    padding: 15px 20px 15px 0px;
    min-height: 156px;
    width:100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align:center;
}

Я просто хотел разместитьмой текст вертикально и горизонтально по центру .Этот контейнерный элемент равен внутри столбца flexbox parent <- возможно, это и есть преступник, но я не могу понять это. </p>

(PS: предварительный просмотр, созданный в Chrome)

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Установите для свойства flex-direction: column; значение # item_desc 

#item_desc {
    border:1px solid red;
    padding: 15px 20px 15px 0px;
    min-height: 156px;
    width:100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align:center;
    flex-direction: column;
}
    <div id="item_desc" >
          <strong>Text in strong</strong> 
          nulla a laoreet nibh, at placerat leo. Proin uis condimentum ligula, ut 
          viverra turpis. Morbu lamcorper consequat gravida. Aenean vestibulum urna id 
          purus vulputate landit. Vivamus eleifend, erat quis dapibus pulvinar, eros 
          justo commodo urpis, molestie commodo orci nisi maximus diam.   
          Pellentesque posuere pulvinar malesuada. Nulla eu vestibulum erat.
          Duis sit amet turpis id tellus eleifend faucibus nec non tellus. 
      </div>
0 голосов
/ 30 января 2019

Используйте этот формат HTML ... и CSS такое же .. 

#item_desc {
    border:1px solid red;
    padding: 15px 20px 15px 0px;
    min-height: 156px;
    width:100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align:center;
}
    <div id="item_desc" >
      <div class="desc-inner">
          <strong>Text in strong</strong> 
          nulla a laoreet nibh, at placerat leo. Proin uis condimentum ligula, ut 
          viverra turpis. Morbu lamcorper consequat gravida. Aenean vestibulum urna id 
          purus vulputate landit. Vivamus eleifend, erat quis dapibus pulvinar, eros 
          justo commodo urpis, molestie commodo orci nisi maximus diam.   
          Pellentesque posuere pulvinar malesuada. Nulla eu vestibulum erat.
          Duis sit amet turpis id tellus eleifend faucibus nec non tellus. 
      </div>
      </div>
...