knox-flaneur knox-flaneur - 1 year ago 82
CSS Question

Why isn't my button centering like other elements?

I'm using Bootstrap 3.x and I have a div that is position relative and the button (a tag) is set to position absolute because I want the button to be at the bottom: 10px;.

I also want the button centered. Why is it semi centered here? (I used the text-center class).

See jsfiddle:
https://jsfiddle.net/0dhcoucd/4/

CSS:

.box-badge-orange {
background-color: orange;
position:relative;
height:30em;
}

.box-badge-orange a {
position: absolute;
bottom: 10px;
}

.divaround {
text-align:center;
}

Answer Source

To deal with this kind of problem, add borders to the involved element, that will provide you the information of their position and you will get the idea what is wrong.

Instead of having "button/link" absolute and bottom, make the wrapper(check div with class .place-bottom) absolute, and with width:100% and use .text-center to have button/link center inside the wrapper div.

.box-badge-orange {
  background-color: orange;
  position:relative;
  height:30em;
}

.box-badge-orange .place-bottom {
  position: absolute;
  bottom: 10px;
  border:1px solid black;
  width:100%
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<div class="box-badge-orange">
      <h2>Title Here</h2>
      <p class="text-center">Lorem ipsum</p>
      <div class="place-bottom text-center">
          <a class="btn btn-primary btn-lg" 
             href="/providers/physician-network/about/Pages/Leadership.aspx">
               Click here
          </a>
    </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download