How to position elements center vertically with float element-CodePudding

I have got the floating image and its descriptions.
I want divs which contain descriptions to be positioned center vertically and flow around the image. Here is my code.

.parent {
  border: 1px red solid;
}

.parent:after, .parent:before {
  content: "";
  display: table;
  clear: both;
}

.left-child {
  width: 40vw;
  height: 40vw;
  border: 1px red solid;
  float: left;
}

<div >
  <div ></div>
  <div clss="right-child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div clss="right-child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div clss="right-child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

Anybody who can help me with solving this?

CodePudding user response：

I recommend to you flex box.

A good link about that is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  border: 1px red solid;
  display: flex;
  align-items: center;
}


.left-child {
  width: 40vw;
  height: 40vw;
  border: 1px red solid;
}

<div >
  <div ></div>
  <div >
    Insert your centered stuff here
  </div>
</div>

CodePudding user response：

Set the parent display property to table and the child to table-cell the you can use the vertical-align property to align you content vertically center on its parent:

.parent {
  border: 1px red solid;
  display: table;
  overflow: hidden;
}

.parent:after, .parent:before {
  content: "";
  display: table;
  clear: both;
}

.left-child {
  width: 40vw;
  height: 40vw;
  border: 1px red solid;
  float: left;
}

.right-child {
  display: table-cell; vertical-align: middle;
}

<div >
  <div ></div>
  <div >
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>  
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>