CODEWITHSUNDEEP
htmlcss
Kevin.a
Kevin.a

Reputation: 4306

CSS not centering

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: enter image description here

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

I would like the squares next to eachtother.

Upvotes: 0

Views: 549

Answers (4)

user2337159
user2337159

Reputation: 5

  

    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>

Upvotes: 0

JohnH
JohnH

Reputation: 2133

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

  1. remove: "float: left;"
  2. add: "display: inline-block;

enter image description here

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42374

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! :)

Upvotes: 2

Estkin Krow
Estkin Krow

Reputation: 58

Just use flex on outer

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

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

Upvotes: 3

Related Questions