For a DIV horizontal centering problem

Ask you:
When a page, want to put the DIV horizontally, but haven't been done, because the CSS effect is limited, but also to help everyone
The following code, the DIV is from the top 250px (above the background picture title), then it shows the activities, if there are multiple activities, also need to show the downward.
May use table would be easier, but I still want to familiarize yourself with DIV+CSS method
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The big button</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body { text-align:center; } 
div#activity
{
	position:relative;
	left:0px;
	top:0px;
	width:604px;
	height:124px;
}

div.activity-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:120px;
	height:124px;
	background:url('images/activity_01.png');
}

div.activity-02 {
	position:absolute;
	left:120px;
	top:0px;
	width:484px;
	height:38px;
	background:url('images/activity_02.png');
}

div.activity-03 {
	position:absolute;
	left:120px;
	top:38px;
	width:344px;
	height:86px;
	background:url('images/activity_03.png');
}

div.activity-04 {
	position:absolute;
	left:464px;
	top:38px;
	width:140px;
	height:86px;
	background:url('images/activity_04.png');
}

  #pop {
	position: relative;
float:center;
margin-top:250px;

 }

-->
</style>

</head>
<body  bgcolor="#333333">

<div id="pop">

<div id="activity" style="background-color:#888888; ">
		<div class="activity-01">
	</div>
	<div class="activity-02">
	</div>
	<div class="activity-03">
	</div>
	<div class="activity-04">
	</div>
  </div>
<div id="activity" style="background-color:#888888; ">
		<div class="activity-01">
	</div>
	<div class="activity-02">
	</div>
	<div class="activity-03">
	</div>
	<div class="activity-04">
	</div>
  </div>

  <div>


</body>
</html>

Started by Jenny at November 10, 2016 - 6:57 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The big button</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body { text-align:center; } 
div#activity
{
    position:relative;
    left:0px;
    top:0px;
    width:604px;
    height:124px;
	margin:0 auto;
}
 
div.activity-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:120px;
    height:124px;
    background:url('images/activity_01.png');
}
 
div.activity-02 {
    position:absolute;
    left:120px;
    top:0px;
    width:484px;
    height:38px;
    background:url('images/activity_02.png');
}
 
div.activity-03 {
    position:absolute;
    left:120px;
    top:38px;
    width:344px;
    height:86px;
    background:url('images/activity_03.png');
}
 
div.activity-04 {
    position:absolute;
    left:464px;
    top:38px;
    width:140px;
    height:86px;
    background:url('images/activity_04.png');
}
 
#pop {
position: relative;
margin:0 auto;
margin-top:250px;
}
-->
</style>
 
</head>
<body  bgcolor="#333333">
 
<div id="pop">
 
<div id="activity" style="background-color:#888888; ">
        <div class="activity-01">
    </div>
    <div class="activity-02">
    </div>
    <div class="activity-03">
    </div>
    <div class="activity-04">
    </div>
  </div>
<div id="activity" style="background-color:#888888; ">
        <div class="activity-01">
    </div>
    <div class="activity-02">
    </div>
    <div class="activity-03">
    </div>
    <div class="activity-04">
    </div>
  </div>
 
  <div>
 
 
</body>
</html>

Posted by Miranda at November 19, 2016 - 7:15 PM

The standard layout of fixed width: +margin:0 Auto; (not floating, not absolute or fixed)

Posted by Miranda at November 25, 2016 - 8:14 PM

Browser compatibility, his tone, the use of padding and margin. Less position

Posted by 007 at December 02, 2016 - 9:10 PM

1 with the position using the margin is invalid.
The level of 2.div in the Bureau needs only a,width;b,margin:0 auto 0 auto;

Posted by Hale at December 05, 2016 - 9:15 PM