无法在div内居中放置图像？

Question

So basically, I am trying to center a div with an image inside of a div with left and right divs and the middle div won't center. I have tried positioning absolute and setting left:0 and right:0

here is the structure of the html logoLeft is float:left and logoRight is float:right .

Thank you.

Answer 1

First of all, I added an external div to align the items

<div class="flex">
  <div class="logoLeft"></div>
  <div></div>
  <div class="logoRight"></div>
</div>

In css we do the magic

.flex{
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

Answer 2

You could also use display: table with a container :

<div class="table">
  <div class="logoLeft"></div>
  <div></div>
  <div class="logoRight"></div>
</div>

and the CSS :

.table {
  display: table;
}
.table > div {
  display: table-cell;
  text-align: center;
}