flexbox div text not align inline with child element-CodePudding

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

CodePudding user response：

You can wrapped with an other div.

.wrapper {    
    max-width: 45%;
    display: flex;
    flex: 0 0 45%;
}

<div >
  <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 >
  <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>  
      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>

CodePudding user response：

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

CodePudding user response：

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>