hamish hamish - 4 months ago 8
HTML Question

CSS Centering container divs

I am trying to center two divs in a container div but it is not working. I have text-align center but that does not work. I also had a HTML center tag but that also did not work. Any ideas?

CSS:

#wrapper{
display:block;

text-align: center;
}
#left {
float: left;
margin-right: 30px;
width: 70px;

text-align: center;

}

#right {

float: left;
text-align: center;
width: 70px;

}


HTML:

<div id="wrapper">
<div id="left">
One:
<p>
<button onclick="plus" id="6">plus</button>
<p>
<button onclick="minus" id="7">minus</button></div>

<div id="right">
Two
<p>

<button onclick="plus2" id="6">plus</button>
<p>
<button onclick="minus2" id="7">minus</button></div>
</div>

Answer

Use display:inline-block instead of float:left;

Also you can group selectors to avoid repeating same styles.

#wrapper{
  display:block;

  text-align: center;
}
#left, #right{
  display: inline-block;
  text-align: center;
  width: 70px;
}
#left {
  margin-right: 30px;
}
<div id="wrapper">
<div id="left">
    One:
  <p>
    <button onclick="plus" id="6">plus</button>
    <p>
    <button onclick="minus" id="7">minus</button></div>    

    <div id="right">
    Two
    <p>

    <button onclick="plus2" id="6">plus</button>
    <p>
    <button onclick="minus2" id="7">minus</button></div>
</div>

Comments