CODEWITHSUNDEEP
htmlcssflexbox
Milind
Milind

Reputation: 21

flexbox div text not align inline with child element

Consider the following snippet:

div {
  display: flex;
  flex: 0 0 45%;
  max-width: 45%;
}
<div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.</div>

currently it looks like enter image description here

but I want to align enter image description here

Upvotes: 1

Views: 62

Answers (3)

Maik Lowrey
Maik Lowrey

Reputation: 17566

You can wrapped with an other div.

.wrapper {    
    max-width: 45%;
    display: flex;
    flex: 0 0 45%;
}
<div class="wrapper">
  <div>
    Lorem ipsum dolor sit amet, <strong >dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.
  </div>
</div>

.flex-container {    
    max-width: 45%;    
    flex: 0 0 45%;    
    display: flex;
}
.flex-container div {
  background: gray;
  padding: 10px;
  margin: 10px;
}
.w {    
   color: green;
  position: relative;
}
<div class="flex-container">
  <div>  
      Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.  
  </div>

  <div>  
      Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.  
  </div>
</div>

Upvotes: 3

Sanan Ali
Sanan Ali

Reputation: 3427

You dont't need flex to center a div. You can do this using margin. Check the following code snippet. 

div {
    background:gray;
    width:45%;
    margin-left:auto;
    margin-right:auto;
}
<div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.</div>

Upvotes: 1

Noa Yarin Levi
Noa Yarin Levi

Reputation: 191

div {
    float: left;
    max-width: 45vw;
}

Upvotes: 1

Related Questions