How to vertically align text in the middle of a div that has a percentage height?

Question

Here is what I have right now. In other divs using vertical-align:middleand setting the line-height to the same value as the height property it should work!The only thing is that in those divs I used pixel dimension and not percentages. Can anybody tell me why this wont work with percentages? also setting the text-sizeto 50% should also make text half the size of the div but it is really really small still? What is going on here?

#chooseStateAlabama {
    width: 20%;
    height: 25%;
    top: 0;
    left: 0;
    position: absolute;
    background: url(../_images/_unitedStates/_states/chooseStateAlabama.png);
    background-size: 100% 200%;
    float: left;
    color: #FFFFFF;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 50%;
    line-height: 25%;
    text-align: center;
    vertical-align: middle;
}

Can you post more of the code including HTML or make a [fiddle](http://jsfiddle.net/)? — Dan, Sep 15 '14 at 17:38
`font-size` is not related to the parent element's height. It's related to the base font size. Ditto for `line-height`. — Paulie_D, Sep 15 '14 at 17:39

score 4 · Accepted Answer · answered Sep 15 '14 at 17:50

4

You can use display:inline-block , height:100% and vertical-align:middle to a single element or pseudo element aside the text (before or after): DEMO

#chooseStateAlabama:before {/* this can be an extra tag within HTML structure if pseudo used for other purpose */
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

If you happen to have more content or more than 1 line, then use an element to wrap it as well and apply to it display and vertical-align. DEMO2 to see behavior

answered Sep 15 '14 at 17:50

G-Cyrillus

101,410
14
105
129

Thank you! That did it! :) Can you answer one more question? How to you make text-size responsive to the size of the div it is in? – Kyle_Figueroa Sep 15 '14 at 18:01
@figureoa.kyle710 you cannot really do this without javascript. you could take a look at vw units , wich will take the screen width as a reference Your demo could use 5vw or whatever else since you use % 100% then 20% , wich is 100vw and 20vw here – G-Cyrillus Sep 15 '14 at 18:04
Okay, maybe i'll have to take a look into a little java script for it! Thanks again!! – Kyle_Figueroa Sep 15 '14 at 18:06
@figureoa.kyle710 check this if your demo is close to your reality : http://jsfiddle.net/L85h8vvj/6/ (read update of my previous comment too :) ) – G-Cyrillus Sep 15 '14 at 18:07
Perfect! Had to adjust some measurements for my real situation but I got it and it works perfect! Thank you so much! – Kyle_Figueroa Sep 15 '14 at 18:14
add width: 100% also – Dvir Jun 15 '17 at 13:13
@Dvir *not at all*, no width is required because it should be widthless at first , unless you want to push content out of the box , but why ? – G-Cyrillus Jun 15 '17 at 18:28

score 0 · Answer 2 · answered Sep 15 '14 at 17:49

If you can alter the markup you can use quite a few ways to get the result you want.

http://jsfiddle.net/vvpn6cge/

Because you have text ( that could be one or many lines long I guess) then you could get the result using CSS table cells (see the fiddle).

.outer-container {
   display: table;
   width: 100%;
}
.txt-vertical-align {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

score 0 · Answer 3 · edited May 23 '17 at 12:19

0

As a further alternative, you might use flexbox

display: flex;
justify-content:center;
align-content:center;
flex-direction:column;

(stolen from this stackoverflow question)

edited May 23 '17 at 12:19

Community

1
1

answered Sep 15 '14 at 17:58

Lorenz Merdian

722
3
14

for the flex, there is even a easier way to do : http://jsfiddle.net/L85h8vvj/4/ container in display:flex : height and width , and a child set with: margin:auto; – G-Cyrillus Sep 15 '14 at 18:02

score 0 · Answer 4 · answered Sep 15 '14 at 18:18

http://jsfiddle.net/L85h8vvj/7/

HTML

<body>
<div class='container4'>
    <div>Example :)</div>
</div>
</body>

CSS

body{
    margin:0px;
}
div.container4 {
height: 100%;
width:100%;
position: absolute;
}

div.container4 div {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: 50-%;
transform: translate(-50%, -50%) 
}

How to vertically align text in the middle of a div that has a percentage height?

4 Answers4

Linked