CSS vertical center image and text

Question

I was wrote this source code just for example, I was manual enter padding-top 90px for h2 tag for example what i want; but when remove padding text is not centered vertical. This is not problem when i know bluebox div height but some times this is 200px, some times 900px.

.bluebox
{
width: 400px;
background-color: blue;
height: 200px;
}

.bluebox h2
{
font-family: Arial;    
font-size: 10pt;  
text-align: center;
padding-top: 90px;
}

<div class="bluebox"><h2>Hi i am a text, now I am only horizontal centered<h2></div>

Demo: http://jsfiddle.net/5UJWa/

http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css?rq=1 ? — Benjamin Gruenbaum, Jul 09 '13 at 21:30
I was try put vertical-align:middle and some more examples but does not work in my example, i talk about text. — ante1820, Jul 09 '13 at 21:36
@Koki Some times bluebox is 200px, some times i don't know height dimension. — ante1820, Jul 09 '13 at 21:37

score 1 · Answer 1 · answered Jul 09 '13 at 21:48

.bluebox {
    width: 400px;
    background-color: blue;
    height: 200px;
    position: relative; /* allow absolute positioning within */
}

.bluebox h2 {
    font-family: Arial;    
    font-size: 10pt;  
    text-align: center;
    position: absolute; /* positioning */
    top: 50%; /* 50% from the top (half way) */
    margin-top: -5pt; /* bring it back up half the height of your text size */
    width: 100%; /* to allow for the text align */
}

Example at http://jsfiddle.net/zTPgh/1/ - Change the height of the container and run or update to see it in action.

score 0 · Answer 2 · answered Jul 09 '13 at 21:34

0

You can play with display: table-cell;.

Your new CSS:

.bluebox {
    width: 400px;
    background-color: blue;
    height: 150px;
    display: table-cell;
    vertical-align: middle;
}

.bluebox h2 {
    font-family: Arial;    
    font-size: 10pt;  
    text-align: center;
}

Check out the illustration on jsFiddle.

answered Jul 09 '13 at 21:34

Guilherme Oderdenge

4,935
6
61
96

Yes, that work, but i don't know why does not work in my working example, bootstrap layout. – ante1820 Jul 09 '13 at 21:40
I don't know your layout. If you want more help, post more of your code. – Guilherme Oderdenge Jul 09 '13 at 21:47
Some text

I am not vertical text
When i use display: table-cell my blue box is not 100% width, just arount text. – ante1820 Jul 09 '13 at 21:50

score 0 · Answer 3 · answered Jul 10 '13 at 07:25

0

See my tutorial here which will vertically align and center text and images. DON'T rely on line-heights as you'll have huge gaps between lines of text. http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html

answered Jul 10 '13 at 07:25

Andrew Howard

2,818
5
33
59

score 0 · Answer 4 · edited Dec 03 '15 at 13:37

I have Create one demo for vertical image center and text also i have test on firefox ,chrome,safari, internet explorer 9 and 8 too.

It is very short and easy css and html, Please check below code and you can find output on screenshort.

HTML

    <div class="frame">
      <img src="capabilities_icon1.png" alt="" />
    </div>

CSS

    .frame {
        height: 160px;      
        width: 160px;
        border: 1px solid red;
        white-space: nowrap;
        text-align: center; margin: 1em 0;
    }

    .frame::before {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content:"";
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
    }

Ashish M · Answer 5 · 2016-11-04T06:14:54.417

For aligning an element vertically center, I have used css3 calc() function. It's perfectly working in all the latest browsers including ie11 and edge.

Check it live here https://jsfiddle.net/ashish_m/ebLxsxhk/

.calcTest { width: 250px; height: 250px; border:1px solid #e0e0e0; text-align: center; }
.calcTest .calcTestInner { width: 50px; height: 50px; background: #e0e0e0; 
margin: 0 auto; margin-top: calc(50% - 25px); vertical-align: top; }

<div class="calcTest">
  <div class="calcTestInner">
    Hello Folks
  </div>
</div>

CSS vertical center image and text

5 Answers5

Some text