phwd 0

I have three div containers within a next wrapper div

  1. A Left floating div
  2. A div that I would like to be in the dead middle
  3. A Right floating div

How can I get the second div centered (without using position:absolute) ?

Updated based on answer but the following does not give the center div in the middle, anything I am missing ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head profile="http://gmpg.org/xfn/11"> 
    <title>Sample</title> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
    <style type="text/css">
.left
  {
    float:left;
    display:inline;
  }
.center
  {
    display:inline;
  }
.right
  {
    display:inline;
    float:right;
  }
</style>
    </head> 

<body> 
<div id="wrapper"> 
    <div id="header"> 
        <div id="masthead"> 
            <div class="left"> 
                <div><a href="#">Left</a></div> 
            </div> 
            <div class="right"> 
                <div><a href="#">Right</a></div> 
            </div> 
            <div class="center"> 
                <p id="title">Center</p> 
            </div><!-- #branding --> 

        </div><!-- #masthead -->    
    </div><!-- #header --> 
</div><!-- #wrapper --> 
</body> 
</html>

3 answers

1
point

Add:

#masthead { text-align: center; }

and on .center change it to:

.center { display:inline; margin: auto; }
Answered over 8 years ago by Lynn Wallenstein
  • Thanks for tip. I also changed the center div to inline-block because images were not centering. phwd over 8 years ago
angelo 0
0
points

Try this code... it will center the divs in the page and keep their arrangement regardless of how big your monitor is.

<table width="69" border="0" align="center">
  <tr>
    <td width="59"><div style="position:relative;">
      <div style="position:absolute; text-align:left; top: 100px;">div2 content goes here</div>
      <div style="position:absolute; text-align:left; left: 80px;">div3 content goes here</div>
      <div style="position:absolute; text-align:left; left: -90px; width: 55px;">div4 content goes here</div>
      <div style="position:absolute;text-align:left;">div content goes here</div>
    </div></td>
  </tr>
</table>

Here's the code in action: http://2slick.com/div_center.html

Thanks, Affordable Web Design

Answered over 8 years ago by angelo
melaal 0
0
points
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<title>Sample</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
<style type="text/css">
#masthead{
height: 34px; 
clear:both;
height: 34px; 
border: 1px solid #B3B3B3; 
}

.left {

float:left;
height: 34px;
width:100px;
background-color: #00649C;

} .center { height: 34px; background-color: #C24500; } .right { height: 34px; width:100px; background-color: #7CC200;

float:right;

}

</head> 

Center

<!-- #branding -->
<!-- #masthead -->
<!-- #header -->
<!-- #wrapper -->

Answered over 8 years ago by melaal