CODEWITHSUNDEEP
htmlcss
Sonhja
Sonhja

Reputation: 8458

How to center text on a div

I'm trying to align a text horizontal and vertically. Using de horizontal axis, I made:

text-align: center;

And it worked perfectly. But I want the text to be center on the vertical axis too. I've read lots of solutions, but everybody has different solutions and I'm a bit confused...

http://jsfiddle.net/QLPTD/1/

Thanks!

Upvotes: 1

Views: 8655

Answers (5)

khollenbeck
khollenbeck

Reputation: 16157

Line height is only a good solution if you are going to only have one line of text. The method sachleen mentioned is also another viable option. Another way you could do it is by using absolute positioning... For example....

<div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu massa nisi, pharetra elementum felis. Donec iaculis eros eu sapien pharetra tempor</p>
</div>


<style type="text/css">

  div {
    width:300px;
    height:300px;
    border:1px solid red;
}

p {
   display:block;
   width:300px;
   border:1px solid black;
   position:absolute;
   top:28%;
   text-align:center;
}

</style>

The top % would vary depending on your content.

http://jsfiddle.net/krishollenbeck/gHXf7/

Upvotes: 0

Evgeniy Hui
Evgeniy Hui

Reputation: 21

if you want to align text vertically, you should use same line-height and height.

http://jsfiddle.net/QLPTD/7/

Upvotes: 2

ToddBFisher
ToddBFisher

Reputation: 11610

You can consider using padding to your advantage: http://jsfiddle.net/QLPTD/15/

As long as your padding-top and padding-bottom are they same and you have your display and height set accordingly, your text should appear to be vertically centered

Upvotes: 0

sachleen
sachleen

Reputation: 31141

CSS has a vertical-align property but using it can be a little tricky.

See this page for more info.

I have an outer div that has the display: table; property and then the inner table is display: table-cell;. I can then do vertical-align: middle; on the inner div. All of your styles are applied to the outer div.

HTML

<div id="outer">
    <div id="menu_secciones" >
            Hello!
    </div>
</div>​

CSS

#outer {
    display: table;
    background-color: #dddddd;
    position: absolute;
    left: 0;
    height: 50%;
    width: 100%;
    top: 10%;
}
#menu_secciones
{
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

DEMO

Upvotes: 2

javex
javex

Reputation: 7564

Well one thing you can do is

line-height: 25px;

You do not provide a height, but instead the height is automatically set. You can try this, it works most of the time for me.

Upvotes: 1

Related Questions