2

I have experienced this behavior recently and I can't figure it out what causes it. Every text between <strong></strong> behaves as columns(?) inside my flexbox container.

Please help I'm completely lost!

Preview: 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;
}

I just wanted to position my text vertically and horizontally center. This container div is inside a flexbox column parent <- maybe this is the culprit, but I can't figure it out.

( PS: The preview created in Chrome )

Catso
  • 113
  • 12
  • 3
    `Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.` https://www.w3.org/TR/css-flexbox-1/#flex-items – Temani Afif Jan 30 '19 at 10:53
  • Thank you, this was also really helpful! – Catso Jan 30 '19 at 11:01

2 Answers2

2

Set flex-direction: column; property to #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>
Rahul Rahatal
  • 648
  • 5
  • 19
0

Use this html format... and css is same..

#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>
Mohit Gupta
  • 739
  • 1
  • 5
  • 16