Geek Answers Handbook

How to center text in div element?

I am trying to create a square element that will have text centered both vertically and horizontally. In addition, the entire square must be a reference. 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?

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

+7
html css
source share
7 answers

You can simplify your structure a bit and use display:table-cell for element a .

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 up to IE8

+18
source share

A great way to get perfectly focused text is to use the flexbox layout. You can horizontally and vertically center the contents 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/

+9
source share

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

jsfiddle

+1
source share

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 is all right!;)

+1
source share

Try using: line-height: 150px to set the height of the content in the field. This should work well if there is only one line of content.

+1
source share

Try the following:

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 this only allows one line of text ... is this a problem?

EDIT, found a better solution, displays the binding as a table cell, several lines also work:

 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 script

+1
source share

Use valign="middle" in <td>

Example:

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

More articles:


All Articles