CODEWITHSUNDEEP
htmlcss
Thelightdev
Thelightdev

Reputation: 21

Cant center an image inside of a div?

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.

post image

Thank you.

Upvotes: 1

Views: 56

Answers (2)

j-printemps
j-printemps

Reputation: 1298

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

Upvotes: 1

SpaceDogCS
SpaceDogCS

Reputation: 2968

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

Upvotes: 1

Related Questions