CODEWITHSUNDEEP
htmlcss
Son of anarchy
Son of anarchy

Reputation: 145

center text in div

  <div>
<div class="left">
  <div align="center" class="node">
    <div class="nodeText">
      <h2 >test</h2>
      
  </div>
  <div class="node">
      <h2>test</h2>
  </div>
  <div class="node">
      <h2>test</h2>
  </div>
<div>

I need to center text in div nothing seems to work

.left {
  float:left;
  width:200px;
  border:solid 1px black;
  text-align: center;
}
.node {
  height:200px;
  border:solid 1px black;
  margin:0 auto;
}
.nodeText{
  vertical-align: middle;
}
h2{
     text-align: center;
}

Upvotes: 4

Views: 8225

Answers (3)

cletus
cletus

Reputation: 625427

Do you mean vertical centering, horizontal centering or both?

Horizontal centering of inline content is easy. Just apply text-align: center to the containing block. Centering horizontally a block within another block with CSS is typically done with:

#centerMe { margin: 0 auto; }

Note: on IE6 this requires that IE be in "standards compliant" rather than "quirks" mode. To force this always put a DOCTYPE on your HTML document. For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Vertical centering is much worse.

You may want to look at Vertical Centering in CSS. This is actually a non-trivial problem. The vertical-align style property you're using only applies to table cells (in a cross-browser backwards compatible way). This would be trivial to do with a table for what it's worth.

Upvotes: 5

Christopher Howlin
Christopher Howlin

Reputation: 701

The HTML you have written works in my browser (FF 3.5.8). However you are missing two closing <\div> tags. Maybe your browser is stricter than mine. Also, <center> is deprecated so try to avoid it where possible.

I would put all of this in comments but my rep ain't high enough yet! :/

Upvotes: 1

Jason
Jason

Reputation: 52547

Try closing your .nodeText div.

Upvotes: 0

Related Questions