CODEWITHSUNDEEP
css
cade galt
cade galt

Reputation: 4191

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

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.

Upvotes: 0

Views: 95

Answers (4)

Paulie_D
Paulie_D

Reputation: 115383

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>

Upvotes: 0

Cahnory
Cahnory

Reputation: 11

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

Upvotes: 0

K.Shrestha
K.Shrestha

Reputation: 577

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

Upvotes: 1

rich_c
rich_c

Reputation: 110

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

body{
   text-align:center;
}

Answer copied from here: CSS center display inline block?

Upvotes: 0

Related Questions