CSS not centering

Question

I have the following html and css.

  .divOuter {
  width: 50%;
  margin: 0 auto;
}

.divInner1,
.divInner2,
.divInner3 {
  border: 1px solid;
  float: left;
  width: 150px;
  height: 150px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  text-align: center;

<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png"></img>
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

I used the outer div to try and center everything inside. but i get the following image:

The squares in the middle are not centered. A working example is on xat.me/madses1996

I would like the squares next to eachtother.

_"The squares in the middle are not centered"_ - why would they be, you're floating them - "floating" and "centering" are opposite concepts, you can't have both at the same time. Use inline-block instead ... or go flexbox. — CBroe, Dec 06 '17 at 20:37
flex is the way to go - check this link https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — bgeorge11, Dec 06 '17 at 20:39

score 3 · Accepted Answer · answered Dec 06 '17 at 20:38

3

Just use flex on outer

.divOuter {
  width: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divInner1,
.divInner2,
.divInner3 {
  flex: 1
}

answered Dec 06 '17 at 20:38

Estkin Krow

58
4

score 2 · Answer 2 · answered Dec 06 '17 at 20:39

Your .divOuter is correctly centered, but the problem is that you're apply a fixed width of 150px to your three inner elements. Swapping this to a percentage-based width of 100% correctly centers the elements:

.divOuter {
  width: 50%;
  margin: 0 auto;
}

.divInner1,
.divInner2,
.divInner3 {
  border: 1px solid;
  float: left;
  width: 100%;
  height: 150px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  text-align: center;

<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png" />
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

If you want to make use of a fixed width, you can do so by definining it on .divOuter:

.divOuter {
  width: 150px;
  margin: 0 auto;
}

.divInner1,
.divInner2,
.divInner3 {
  border: 1px solid;
  float: left;
  width: 100%;
  height: 150px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  text-align: center;

<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png" />
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

Also note that the <img> tag is self-closing; there is no </img> tag.

Hope this helps! :)

Nice and centered but they are underneath now i wanted them next to eachother — Kevin.a, Dec 06 '17 at 20:46

score 1 · Answer 3 · answered Dec 06 '17 at 20:44

1

Using Chrome's Inspect, I got the results I think you are looking for with these updates to the .divInner1, 2 & 3 CSS classes.

remove: "float: left;"
add: "display: inline-block;

answered Dec 06 '17 at 20:44

JohnH

1,920
4
25
32

score 0 · Answer 4 · answered Dec 06 '17 at 20:53

  

    body{
  
  background: black;
}

#title h3{
  color: white;
  text-align: center;
}
.divOuter {
      margin: 0 auto;
      width: 100%;
      text-align: center;
      margin: 0 auto;
    }

    .divInner1,
    .divInner2,
    .divInner3 {
          border: 1px solid white;
        
          width: 150px;
          height: 150px;
          margin-left: 3px;
          margin-right: 3px;
          margin-top: 50px;
          text-align: center;
          display: inline-block;

<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png"></img>
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

.divOuter {
  width: 150px;
  margin: 0 auto;
}

.divInner1,
.divInner2,
.divInner3 {
  border: 1px solid;
  float: left;
  width: 100%;
  height: 150px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 50px;
  text-align: center;

<div id="logo">
  <img src="http://i.cubeupload.com/jmdKlW.png" />
</div>
<div id="title">
  <h3>Who's watching</h3>
</div>
<div class="divOuter">
  <div class="divInner1">First DIV</div>
  <div class="divInner2">Second DIV</div>
  <div class="divInner3">Third DIV</div>
</div>

CSS not centering

4 Answers4