CODEWITHSUNDEEP
htmlcssalignmentvertical-alignment
xcdemon05
xcdemon05

Reputation: 726

Vertically centering a piece of text inside a div

I've seen tons of tuts on how to do this but none of them are working for me. I'm trying to center my name inside a div (identified as ".banner").

Here is the code:

//html///////////////////////////////////
<div class="banner">
    <p>Jake Demian_</p>
</div>


//css////////////////////////////////////
.banner
{
    width: 100%;
    height: 400px;
    background-color: #e8bc23;
    text-align: center;
}

.banner p
{
    display: inline-block;
    font-family: "courier new";
    margin: 0 0;
    height: 100%;
    vertical-align: middle;
}

jsfiddle link: linkage

Sorry for the minimal information. I've tried every combination of inline-block, vertical-align: middle, height 100%, margin: auto that I can think of.

Upvotes: 1

Views: 62

Answers (1)

nicholaschris
nicholaschris

Reputation: 1401

Try adding:

top:45%;
position:relative;

to .banner p.

You could also try adding:

display: table;

to .banner and

display: table-cell;

to .banner p.

JSFiddle: http://jsfiddle.net/BTjr7/2/

Upvotes: 1

Related Questions