How can I center text without it staying at the top it's containing element?

Question

I have been attempting to use vertical-align: middle and text-align: center to center the button, but it does not affect my styling at all and the button stays at the top.

I am not sure why the style is not being applied. I can use top: 50%, but that is not the true center depending on the amount of text the button will contain.

#selectmanager-outer {
    width: 200px;
    height: 200px;
    float: left;
    box-sizing: border-box;
    padding: 10px;
}

 #selectmanager-inner {
    height: 150px;
    box-sizing: border-box;
    border: 1px solid #E0E0E0;    
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F5F5F5), to(#FAFAFA));
    background-image: -webkit-linear-gradient(#F5F5F5, #FAFAFA);
    background-image: -moz-linear-gradient(#F5F5F5, #FAFAFA);
    background-image: -o-linear-gradient(#F5F5F5, #FAFAFA);
    background-image: linear-gradient(#F5F5F5, #FAFAFA);
    padding: 10px;
}

<div id='selectmanager-outer'>
    <div id ='selectmanager-inner'>
        <button>Very long button name to test</button>
    </div>
</div>

Solution: With the assistance of Akheel K M's answer with the use of position, percentages, and transforms.

#selectmanager-outer {
  width: 200px;
  height: 200px;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}

#selectmanager-inner {
  height: 150px;
  box-sizing: border-box;
  border: 1px solid #E0E0E0; 
  border-radius: 30px 30px; 
  background: #F5F5F5;
  background-image: -webkit-linear-gradient(top, #F5F5F5, #FAFAFA);
  background-image: -moz-linear-gradient(top, #F5F5F5, #FAFAFA);
  background-image: -ms-linear-gradient(top, #F5F5F5, #FAFAFA);
  background-image: -o-linear-gradient(top, #F5F5F5, #FAFAFA);
  background-image: linear-gradient(to bottom, #F5F5F5, #FAFAFA);
  padding: 10px;
  position: relative;
}

#selectmanager-inner button {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translateY(-50%) translateX(-50%);
}

<div id='selectmanager-outer'>
  <div id ='selectmanager-inner'>
    <button>Very long button name to test</button>
  </div>
</div>

Possible duplicates: [Vertically align text in a div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div), [CSS Center Text](http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block/25799339#25799339), [How to align text vertical center](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — showdev, Apr 23 '15 at 17:18
if you use `top:50%;` you can use `transform:translateY(-50%)` to get the "true center" — zgood, Apr 23 '15 at 17:22

score 2 · Accepted Answer · answered Apr 23 '15 at 17:22

2

Why don't you try transform: translateY(-50%); after you do top:50%;?Probably won't work on older browsers.

answered Apr 23 '15 at 17:22

Akheel K M

170
1
2
10

2

FYI: transform has pretty good support. See [here](http://caniuse.com/#search=transform) – zgood Apr 23 '15 at 17:24
Why transform: translateY(-50%)? Won't that nullify top: 50%? When I use just top: 50%, it goes to 1/3 from the top? When I apply both your suggestions, my button start going above the containing element. – imparante Apr 23 '15 at 17:46
The 50% specified in the in the translateY parameter is the 50% of the height of the element.In your case, 50% of the height of the button. – Akheel K M Apr 23 '15 at 17:50
1

#selectmanager-inner { position: relative;} button { position: absolute; top: 50%; transform: translateY(-50%); } /*try adding this bit to your css.*/ – Akheel K M Apr 23 '15 at 17:53
This is a workable solution can also be done for horizontal alignement. Up voted. – Musk Apr 23 '15 at 18:23
Thanks Akheel! That worked! Applying percentages and transforms is new to me. I did the same to adjust the side and it worked for vertical alignment! – imparante Apr 23 '15 at 19:45

score 0 · Answer 2 · answered Apr 23 '15 at 18:05

You can use margin-top if you get the middle of both the parent container and button. For this case try

#selectmanager-inner .buttonclass{
  margin-top:50px;
}

I would apply a class to the button so that it doesn't affect all the buttons in your site.

How can I center text without it staying at the top it's containing element?

2 Answers2