CODEWITHSUNDEEP
htmlcss
Aron Solberg
Aron Solberg

Reputation: 6868

How to get this div centering to work correctly?

I want the content in both the left and right div to be centered vertically and horizontally. The left div just contains some text. The right div has a button and one line of text below it. I tried the line-height trick but that doesn't work for the second line in the right div. Any ideas?

HTML

<div class="container">
    <div class="lcontent">
        <p>Hello</p>
    </div>
    <div class="rcontent">
        <input type="button" class="red" value="Upgrade" /><br />for more tokens!
    </div>
</div>

CSS

div {
    border:1px solid #000000;    
}

div.container {
  height: 100px;
}

div.lcontent, div.rcontent {
  height: 100%;
  float:left;
}

div.lcontent {
  text-align: center;
  line-height: 100px; 
  width:52%;
}

http://jsfiddle.net/dCKnE/

Upvotes: 0

Views: 60

Answers (3)

Honanin
Honanin

Reputation: 191

Here's a solution if you don't want to use tables.

HTML

<div class="left">
    <div class="content">
    Hello
    </div>
</div>
<div class="right">
    <div class="content">
        <input type="button" value="Upgrade"/>
        <br />
        for more tokens!
    </div>
</div>

CSS

div.left {
    float:left;
    border:1px solid #000000; 
    height:100px;
    width:53%;
}

div.right {
    float:right;
    border:1px solid #000000;    
    height:100px;
    width:46%;
}

div.content{
    text-align:center;
    position:relative; 
    top:30%;    
    height:100%;
    border:0px solid #000;
}

http://jsfiddle.net/dCKnE/13/

Upvotes: 0

Dextere
Dextere

Reputation: 301

Try this

<div class="container">
 <table align="center">

  <tr>
   <td> 
    <div class="lcontent">
     <p>Hello</p>
    </div>
   <div class="rcontent">
    <input type="button" class="red" value="Upgrade" /><br />for more tokens!
   </div>
  </td>
 </tr>
</table>
</div>

Upvotes: 0

Andrew Backes
Andrew Backes

Reputation: 1904

To help vertically align content in your div, you could do something like this:

<div style="display: table; height: 450px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      Your centered content.
    </div>
  </div>
</div>

The key is to use display:table and display:table-cell to center your content. For IE, I'm not sure this will work in versions 8 and under...I could be wrong though.

Upvotes: 2

Related Questions