CODEWITHSUNDEEP
css
Hayi
Hayi

Reputation: 6236

Align text into a div

My float div contain just text and i want to align it vertically at the middle

HTML:

<div>CC</div>

I try this 

div {
    height: 100px;
    border: 1px solid;
    float: left; /* this element is necessary for my big other code so i have to keep it */
    vertical-align: middle;
}

But it didn't work, how can i fix it ? here's a FIDDLE

Upvotes: 0

Views: 58

Answers (4)

Marc Audet
Marc Audet

Reputation: 46785

If you have a single word or a short line of text, you could simply use the following CSS:

div {
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    float: left;
    border: 1px solid blue;
}

Set the line-height to be the same as the height and then apply vertical-align: middle, works well if you have a single line of text.

See demo at: http://jsfiddle.net/audetwebdesign/2En98/

Upvotes: 1

Abdulfattah Alhazmi
Abdulfattah Alhazmi

Reputation: 301

You can use text-align property instead of vertical-align then use "center" as value;

Simply as follows:

  div {
       text-align: center;
  }

Upvotes: 0

Nuno Ribeiro
Nuno Ribeiro

Reputation: 2555

Use display: table-cell and vertical-align: middle :)

div {
    height: 100px;
    border: 1px solid;
    vertical-align: middle;
    display:table-cell;
}

Fiddle

Upvotes: 1

APAD1
APAD1

Reputation: 13666

You can use display:table-cell; to accomplish this. Like so:

HTML:

<div id="container">
    <div class="content">CC</div>
</div>

CSS:

#container {
    height:100px;
    width:100%;
    border:1px solid;
    display:table;
}
.content {
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

Updated Fiddle

Upvotes: 1

Related Questions