CODEWITHSUNDEEP
htmlcss
Tschareck
Tschareck

Reputation: 4239

How to center text in a div element?

I'm trying to create square element, that will have text centered both vertically and horizontally. Additionally, the whole area of the square should be a link. This is my HTML:

<div class="w1h1 medium">
    <a class="userLink" target="_blank" href="Fancybox.aspx">
        <table style="width: 100%; height: 100%">
            <tr style="vertical-align: central">
                <td style="text-align: center; font-weight: bold;">
                    text in the middle 
                </td>
            </tr>
        </table>
    </a>
</div>

And this is my CSS:

div.w1h1 {
    width: 150px;
    height: 150px;
}

.medium {
    background-color: #06849b;
    color: white;
    font-family: sans-serif;
}

a.userLink
{
    width: 150px;
    height: 150px;
    display: table;
    color: #FFFFFF;
    text-decoration: none;
}

It works in Chrome and Firefox, but not in Internet Explorer. In IE the text is at the top of the square, not in the middle. Can you help me with this?

I just created playground here: http://jsfiddle.net/Tschareck/yfnnm/

Upvotes: 9

Views: 71231

Answers (7)

bromy
bromy

Reputation: 221

A great way to get perfectly centered text is to use a flexbox layout. You can horizontally and vertically center the content of a container element with very little code:

.container-with-centered-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

Demo: http://jsfiddle.net/913fch6v/

Upvotes: 12

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

Try this one:

HTML:

<a href="#">Text here</a>

CSS:

a {
    display: block;
    width: 150px;
    height: 150px;
    background-color: #06849b;
    color: white;
    font-family: sans-serif;
    vertical-align: middle;
    line-height: 150px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

And a demo.

Please note that it only allows one line of text... is that a problem?

EDIT, found a better solution, display the anchor as a table cell, works multiple line too:

a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 150px;
    height: 150px;
    background-color: #06849b;
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
}

Updated fiddle

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195962

You could simplify your structure a bit, and use display:table-cell on the a element.

html

<div class="w1h1 medium">
    <a class="userLink" target="_blank" href="Fancybox.aspx">
       text in the middle 
    </a>
</div>

css

div.w1h1 {
    width: 150px;
    height: 150px;
    font-family:sans-serif;
    background-color: #06849b;
}
a.userLink {
    width: 150px;
    height: 150px;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    color: #FFFFFF;
    text-decoration: none;
}

Demo at http://jsfiddle.net/yWLYV/1/

works down to IE8

Upvotes: 18

SKeurentjes
SKeurentjes

Reputation: 1878

Use valign="middle" in the <td>

Example:

<td style="text-align: center; font-weight: bold;" valign="middle">
   text in the middle 
</td>

Upvotes: 1

acairns
acairns

Reputation: 505

Try using: line-height: 150px to set the height of the content within the box. This should work well if there is only a single line of content.

Upvotes: 1

avalkab
avalkab

Reputation: 436

try my technique; follow this 

.outer{ float:left; width:100px; height:100px; background-color:#ccc; }
.innet{ float:left; width:100%; line-height:100px; text-align:center; }

<div class="outer">
        <span class="inner">This is my text</span>
</div>

and morpheus all right! ;)

Upvotes: 1

Morpheus
Morpheus

Reputation: 9055

Change <tr style="vertical-align: central"> to <tr style="vertical-align: middle"> and a.userLink property display to inline-block or inline.

jsfiddle

Upvotes: 1

Related Questions