display:inline-block is breaking my centering mechanism - how to fix?

Question

I want to use display:inline-block per this SO Post here so that a div will take the dimensions of its children.

It works as stated in the post. The problem I'm having is that now my centering is broken by this change.

I was centering the div using

margin: 0px auto;

I want the div centered and I also want it to take the dimensions of it children.

Here is the CSS for the containing div:

#container-1{
  display: inline-block;
  position: relative;
  top: 50px;
  width: 1000px;
  margin: 0px auto;
  background: rgba(255, 255, 255, 0.5);
}

Here is the HTML - just two p tags in a div.

<div id="container-1">
    <p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
    <p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>

and if needed the CSS for the 2 p tags:

.si_match{
  cursor:  pointer;
  display: inline-block;
  padding:  14px 14px;  
  text-decoration:  none;
  font-size: 14px;
}

#si_but{
  position: relative;
  left: 50px;
  float: left;
}
#su_but{
  position: relative;
  right: 50px;
  float: right;
}

Update: The larger concern is why is my containing div about 200 px to the left. There is nothing indicating why this is.

possible duplicate of [CSS center display inline block?](http://stackoverflow.com/questions/4980525/css-center-display-inline-block) — Alexis Tyler, Aug 22 '15 at 14:17

score 1 · Answer 1 · answered Aug 22 '15 at 15:12

Here you need to add a "text-align: center" to the parent element. So considering "< body >"to be its parent element.

body{
text-align: center;
}

#container-1{
  display: inline-block;
  position: relative;
  top: 50px;
  width: 1000px;
  margin: 0px auto;
  background: rgba(255, 255, 255, 0.5);
}

Here's the related HTML.

<body>
    <div id="container-1">
        <p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
        <p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
    </div>
</body>

Hope this helps. Cheers!!

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

You could add text-align:center to the body element:

body{
   text-align:center;
}

Answer copied from here: CSS center display inline block?

edited May 23 '17 at 11:44

Community

1
1

answered Aug 22 '15 at 14:15

rich_c

110
2
10

score 0 · Answer 3 · answered Aug 22 '15 at 15:42

0

You just need to use display table instead of inline-block.

#container-1{
  display: table;
  position: relative;
  top: 50px;
  width: 1000px;
  margin: 0px auto;
  background: rgba(255, 255, 255, 0.5);
}

answered Aug 22 '15 at 15:42

Cahnory

11
1

score 0 · Answer 4 · answered Aug 22 '15 at 16:31

text-align:center on the parent will center inline-block children.

Any misalignment is probaby related to the positioning you have applied. Just remove it along with the float.

#container-1 {
  text-align: center;
}
.si_match {
  cursor: pointer;
  display: inline-block;
  padding: 14px 14px;
  text-decoration: none;
  font-size: 14px;
  border: 1px solid grey;
}

<div id="container-1">
  <p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
  <p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>

display:inline-block is breaking my centering mechanism - how to fix?

4 Answers4