html - XHTML コンテンツを CSS で中央揃えするにはどうすればよいですか?

Question

そのため、最近、自分の Web サイトをテーブルコンテンツ形式から div コンテンツ形式に変換しました。

表形式バージョン:

Web サイトの表バージョン:こちら。

テーブルバージョンスタイル CSS:

body {
    width: 1020px;
    margin: 0 auto;
    background-image: url(images/bg.png);
    }

.logo{
    width:301px;
    height:151px;
    background:url(images/logo.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.logo:hover {
    opacity:0.9;
}

.signin{
    width:69px;
    height:30px;
    background:url(images/signin.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.signin:hover {
    opacity:0.9;
}

.register{
    width:79px;
    height:30px;
    background:url(images/register.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.register:hover {
    opacity:0.9;
}

.Contact_Us{
    width:53px;
    height:9px;
    background:url(images/Contact_Us.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.Contact_Us:hover {
    opacity:0.9;
}

.Code_of_Conduct{
    width:84px;
    height:9px;
    background:url(images/Code_of_Conduct.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.Code_of_Conduct:hover {
    opacity:0.9;
}

.Privacy_Policy{
    width:65px;
    height:12px;
    background:url(images/Privacy_Policy.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.Privacy_Policy:hover {
    opacity:0.9;
}

.Copyright{
    width:149px;
    height:9px;
    background:url(images/Copyright.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.Copyright:hover {
    opacity:0.9;
}

.slideshow{
    width:301px;
    height:151px;
    background: url(slideshow.png),
      url(minecraft.png),
      url(tf2.png),
      url(CSS.png),
      url(GM.png),
      url(aos.png),
      url(CSGO.png),
      url(voip.png),
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.slideshow:hover {
    opacity:0.9;
}

テーブルバージョンソース:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/png" href="http://www.xodusen.com/resources/images/favicon.png">
<title>Welcome to XodusEN</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>
<meta name="description" content="This is the homepage of XodusEN. Xodus Entertainment Network is a unique & friendly Gaming Community that welcomes & realises the potential, and value within any user regardless of their origin. " >
<meta name="keywords" content="XeN, Xodus, XEN, xen, Xodus Entertainment Network, gaming, community, PC, Steam, XBL, Xbox 360, PSN, Playstation, games, Gaming, Community, XodusEN, Gaming Network, Network, TF2, Server, CS:S, Minecraft, premium, servers, Counter-Strike: Source, Website, Homepage, Minecraftia" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script type="text/javascript">
    window.location = "http://www.xodusen.com/ie/";
</script>
<![endif]-->
</head>
<body bgcolor="#d7d7d7">
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="18">
            <img src="images/index_01.png" width="1020" height="9" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="9" alt=""></td>
    </tr>
    <tr>
        <td colspan="11" rowspan="2">
            <img src="images/index_02.png" width="826" height="252" alt=""></td>
        <td>
        <a id="signin" class="signin" href="http://s.xodusen.com/VrtqYm">
                <img src="images/signin.png" width="69" height="30" border="0" alt=""></a>
        <td rowspan="6">
            <img src="images/index_04.png" width="3" height="643" alt=""></td>
        <td colspan="3">
        <a id="register" class="register" href="http://s.xodusen.com/WW3rpZ">
                <img src="images/Register.png" width="79" height="30" border="0" alt=""></a>
        <td colspan="2" rowspan="6">
            <img src="images/index_06.png" width="43" height="643" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="30" alt=""></td>
    </tr>
    <tr>
        <td rowspan="5">
            <img src="images/index_07.png" width="69" height="613" alt=""></td>
        <td colspan="3" rowspan="5">
            <img src="images/index_08.png" width="79" height="613" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="222" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/index_09.png" width="385" height="53" alt=""></td>
        <td>
            <img src="images/index_10.png" width="250" height="53" alt=""></td>
        <td colspan="5">
            <img src="images/index_11.png" width="191" height="53" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="53" alt=""></td>
    </tr>
    <tr>
        <td colspan="4" rowspan="3">
            <img src="images/index_09-13.png" width="360" height="338" alt=""></td>
        <td colspan="3">
        <a id="logo" class="logo" href="http://www.xodusen.com/community">
                <img src="images/logo.png" alt=""></a>
        </td>
        <td colspan="4" rowspan="3">
            <img src="images/index_11-15.png" width="165" height="338" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="151" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/index_09-16.png" width="25" height="187" alt=""></td>
        <td>
            <img src="images/index_16.png" width="250" height="46" alt=""></td>
        <td rowspan="2">
            <img src="images/index_11-18.png" width="26" height="187" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="46" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_12.png" width="250" height="141" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="141" alt=""></td>
    </tr>
    <tr>
        <td rowspan="7">
            <img src="images/index_13.png" width="27" height="548" alt=""></td>
        <td colspan="16" id="slideshow" class="slideshow">
        <a href="http://www.xodusen.com/community"><img src="images/slideshow.png" width="960" height="305" alt=""></a>
        <a href="http://www.xodusen.com/mcurl"><img src="images/minecraft.png" width="960" height="305" alt=""></a>
        <a href="steam://connect/74.121.188.194:27015"><img src="images/tf2.png" width="960" height="305" alt=""></a>
        <a href="steam://connect/74.121.188.195:27015"><img src="images/CSS.png" width="960" height="305" alt=""></a>
        <a href="steam://connect/74.121.188.197:27015"><img src="images/GM.png" width="960" height="305" alt=""></a>
        <a href="aos://3267131722:32887"><img src="images/aos.png" width="960" height="305" alt=""></a>
        <a href="steam://connect/74.121.188.196:27015"><img src="images/CSGO.png" width="960" height="305" alt=""></a></td>
        <td rowspan="7">
            <img src="images/index_15.png" width="33" height="548" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="305" alt=""></td>
    </tr>
    <tr>
        <td colspan="16">
            <img src="images/index_16-23.png" width="960" height="155" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="155" alt=""></td>
    </tr>
    <tr>
        <td rowspan="5">
            <img src="images/index_17.png" width="38" height="88" alt=""></td>
        <td rowspan="2">
            <a id="Copyright" class="Copyright" href="http://www.xodusen.com/community">
                <img src="images/Copyright.png" width="149" height="9" border="0" alt=""></a></td>
        <td colspan="14">
            <img src="images/index_25.png" width="773" height="5" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="5" alt=""></td>
    </tr>
    <tr>
        <td colspan="5" rowspan="4">
            <img src="images/index_20.png" width="527" height="83" alt=""></td>
        <td rowspan="3">
            <a id="Privacy_Policy" class="Privacy_Policy" href="http://s.xodusen.com/VhGEkH">
                <img src="images/Privacy_Policy.png" width="65" height="12" border="0" alt=""></a></td>
        <td rowspan="4">
            <img src="images/index_28.png" width="8" height="83" alt=""></td>
        <td colspan="3" rowspan="2">
            <a id="Code_of_Conduct" class="Code_of_Conduct" href="http://s.xodusen.com/Tf5Gz7">
                <img src="images/Code_of_Conduct.png" width="84" height="9" border="0" alt=""></a></td>
        <td rowspan="4">
            <img src="images/index_30.png" width="6" height="83" alt=""></td>
        <td rowspan="2">
            <a id="Contact_Us" class="Contact_Us" href="http://s.xodusen.com/T5EYsG">
                <img src="images/Contact_Us.png" width="53" height="9" border="0" alt=""></a></td>
        <td colspan="2" rowspan="4">
            <img src="images/index_26.png" width="30" height="83" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="images/index_27.png" width="149" height="79" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="5" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="images/index_28-35.png" width="84" height="74" alt=""></td>
        <td rowspan="2">
            <img src="images/index_29.png" width="53" height="74" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_30-37.png" width="65" height="71" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="71" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="38" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="149" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="146" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="25" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="250" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="26" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="80" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="65" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="12" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="69" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="3" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="53" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="20" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="10" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="33" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
</body>
</html>

Div 形式のバージョン:

ウェブサイトの Div バージョン:こちら.

Div バージョンスタイル CSS:

body {
    width: 1020px;
    margin: 0 auto;
    background-image: url(images/bg.png);
    }

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:1020px;
    height:1200px;
}

#index-01_ {
    position:absolute;
    left:0px;
    top:0px;
    width:1020px;
    height:9px;
}

#index-02_ {
    position:absolute;
    left:0px;
    top:9px;
    width:826px;
    height:305px;
}

#Signin_ {
    position:absolute;
    left:826px;
    top:9px;
    width:69px;
    height:30px;
}

#index-04_ {
    position:absolute;
    left:895px;
    top:9px;
    width:3px;
    height:643px;
}

#Register_ {
    position:absolute;
    left:898px;
    top:9px;
    width:79px;
    height:30px;
}

#index-06_ {
    position:absolute;
    left:977px;
    top:9px;
    width:43px;
    height:643px;
}

#index-07_ {
    position:absolute;
    left:826px;
    top:39px;
    width:69px;
    height:613px;
}

#index-08_ {
    position:absolute;
    left:898px;
    top:39px;
    width:79px;
    height:613px;
}

#index-09_ {
    position:absolute;
    left:0px;
    top:314px;
    width:360px;
    height:338px;
}

#Logo_ {
    position:absolute;
    left:360px;
    top:314px;
    width:301px;
    height:151px;
}

#index-11_ {
    position:absolute;
    left:661px;
    top:314px;
    width:165px;
    height:338px;
}

#index-12_ {
    position:absolute;
    left:360px;
    top:465px;
    width:301px;
    height:187px;
}

#index-13_ {
    position:absolute;
    left:0px;
    top:652px;
    width:27px;
    height:548px;
}

#Slideshow_ {
    position:absolute;
    left:27px;
    top:652px;
    width:960px;
    height:305px;
}

#index-15_ {
    position:absolute;
    left:987px;
    top:652px;
    width:33px;
    height:548px;
}

#index-16_ {
    position:absolute;
    left:27px;
    top:957px;
    width:960px;
    height:155px;
}

#index-17_ {
    position:absolute;
    left:27px;
    top:1112px;
    width:39px;
    height:88px;
}

#Copyright_ {
    position:absolute;
    left:66px;
    top:1112px;
    width:148px;
    height:13px;
}

#index-19_ {
    position:absolute;
    left:214px;
    top:1112px;
    width:773px;
    height:5px;
}

#index-20_ {
    position:absolute;
    left:214px;
    top:1117px;
    width:526px;
    height:83px;
}

#Privacy-Policy_ {
    position:absolute;
    left:740px;
    top:1117px;
    width:68px;
    height:23px;
}

#index-22_ {
    position:absolute;
    left:808px;
    top:1117px;
    width:6px;
    height:83px;
}

#Code-of-Conduct_ {
    position:absolute;
    left:814px;
    top:1117px;
    width:84px;
    height:23px;
}

#index-24_ {
    position:absolute;
    left:898px;
    top:1117px;
    width:2px;
    height:83px;
}

#Contact-Us_ {
    position:absolute;
    left:900px;
    top:1117px;
    width:57px;
    height:23px;
}

#index-26_ {
    position:absolute;
    left:957px;
    top:1117px;
    width:30px;
    height:83px;
}

#index-27_ {
    position:absolute;
    left:66px;
    top:1125px;
    width:148px;
    height:75px;
}

#index-28_ {
    position:absolute;
    left:740px;
    top:1140px;
    width:68px;
    height:60px;
}

#index-29_ {
    position:absolute;
    left:814px;
    top:1140px;
    width:84px;
    height:60px;
}

#index-30_ {
    position:absolute;
    left:900px;
    top:1140px;
    width:57px;
    height:60px;
}

.logo{
    width:301px;
    height:151px;
    background:url(images/logo.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.logo:hover {
    opacity:0.9;
}

.signin{
    width:69px;
    height:30px;
    background:url(images/signin.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.signin:hover {
    opacity:0.9;
}

.register{
    width:79px;
    height:30px;
    background:url(images/register.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.register:hover {
    opacity:0.9;
}

.contact_Us{
    width:53px;
    height:9px;
    background:url(images/Contact_Us.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.contact_Us:hover {
    opacity:0.9;
}

.code_of_Conduct{
    width:84px;
    height:9px;
    background:url(images/Code_of_Conduct.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.code_of_Conduct:hover {
    opacity:0.9;
}

.privacy_policy{
    width:65px;
    height:12px;
    background:url(images/Privacy_Policy.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.privacy_policy:hover {
    opacity:0.9;
}

.copyright{
    width:148px;
    height:13px;
    background:url(images/Copyright.png);
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.copyright:hover {
    opacity:0.9;
}

.slideshow{
    width:301px;
    height:151px;
    background: url(slideshow.png),
      url(minecraft.png),
      url(tf2.png),
      url(CSS.png),
      url(GM.png),
      url(aos.png),
      url(CSGO.png),
      url(voip.png),
    text-indent:-9999px;
    border:none;
    cursor:pointer;
}
.slideshow:hover {
    opacity:0.9;
}

Div バージョンソース:

<!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">
<head>
<script type="text/javascript">
//<![CDATA[
window.__CF=window.__CF||{};window.__CF.AJS={"vig_key":{"sid":"c6d1454039dd49b1c8400bbfdf74df7a"},"trumpet":{"message":"XodusEN is undergoing background maintenance, that will provide performance & graphical improvements to our system, but will not hinder your experience across our services."},"ga_key":{"ua":"UA-35779435-1","ga_bs":"2"},"exprmntly":{"service_id":"7967"},"cdnjs":{"__h":"1","cdnjs":"MO,GF,FX,CS,JS"},"abetterbrowser":{"ie":"10"}};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) { var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",mirage:{responsive:0,lazy:0},oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/aav=1870252173/"},atok:"d6e39f49946fcb6d690f0d10d5a963f3",zone:"xodusen.com",rocket:"a",apps:{"vig_key":{"sid":"c6d1454039dd49b1c8400bbfdf74df7a"},"trumpet":{"message":"XodusEN is undergoing background maintenance, that will provide performance & graphical improvements to our system, but will not hinder your experience across our services."},"ga_key":{"ua":"UA-35779435-1","ga_bs":"2"},"exprmntly":{"service_id":"7967"},"cdnjs":{"__h":"1","cdnjs":"MO,GF,FX,CS,JS"},"abetterbrowser":{"ie":"10"}}}];document.write('<script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4114775854/cloudflare.min.js"><'+'\/script>')}}catch(e){};
//]]>
</script>
<script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=1566821048/appsh.min.js"></script><script type="text/javascript">__CF.AJS.inith();</script><link rel="icon" type="image/png" href="http://www.xodusen.com/resources/images/favicon.png">
<title>Welcome to XodusEN</title>
<meta name="description" content="This is the homepage of XodusEN. Xodus Entertainment Network is a unique & friendly Gaming Community that welcomes & realises the potential, and value within any user regardless of their origin. ">
<meta name="keywords" content="XeN, Xodus, XEN, xen, Xodus Entertainment Network, gaming, community, PC, Steam, XBL, Xbox 360, PSN, Playstation, games, Gaming, Community, XodusEN, Gaming Network, Network, TF2, Server, CS:S, Minecraft, premium, servers, Counter-Strike: Source, Website, Homepage, Minecraftia">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/rocketscript" data-rocketsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/rocketscript" data-rocketsrc="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/rocketscript">
 $(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>
<!--[if IE]>
<script type="text/javascript">
    window.location = "http://www.xodusen.com/ie/";
</script>
<![endif]-->
<script type="text/javascript">
/* <![CDATA[ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35779435-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

(function(b){(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)})(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){_gaq.push(["_trackSocial","facebook","like",a])}),FB.Event.subscribe("edge.remove",function(a){_gaq.push(["_trackSocial","facebook","unlike",a])}),FB.Event.subscribe("message.send",function(a){_gaq.push(["_trackSocial","facebook","send",a])}));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){if(a){var b;if(a.target&&a.target.nodeName=="IFRAME")a:{if(a=a.target.src){a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){b=unescape(c.split("=")[1]);break a}}b=void 0}_gaq.push(["_trackSocial","twitter","tweet",b])}})})})(window);
/* ]]> */
</script>
<meta name="pinterest" content="nopin"/></head>
<body style="background-color:#d7d7d7;"><script type="text/javascript">
//<![CDATA[
try{(function(a){var b="http://",c="www.xodusen.com",d="/cdn-cgi/cl/",e="618e40fe1e01787d9cb9aa2f8abc52caf8a32796.gif",f=new a;f.src=[b,c,d,e].join("")})(Image)}catch(e){}
//]]>
</script>
<div id="Table_01">
<div id="index-01_">
<img id="index_01" src="images/index_01.png" width="1020" height="9" alt=""/>
</div>
<div id="index-02_">
<img id="index_02" src="images/index_02.png" width="826" height="305" alt=""/>
</div>
<div id="Signin_">
<a href="http://s.xodusen.com/VrtqYm">
<img id="Signin" class="signin" src="images/Signin.png" width="69" height="30" border="0" alt=""/></a>
</div>
<div id="index-04_">
<img id="index_04" src="images/index_04.png" width="3" height="643" alt=""/>
</div>
<div id="Register_">
<a href="http://s.xodusen.com/WW3rpZ">
<img id="Register" class="register" src="images/Register.png" width="79" height="30" alt=""/></a>
</div>
<div id="index-06_">
<img id="index_06" src="images/index_06.png" width="43" height="643" alt=""/>
</div>
<div id="index-07_">
<img id="index_07" src="images/index_07.png" width="69" height="613" alt=""/>
</div>
<div id="index-08_">
<img id="index_08" src="images/index_08.png" width="79" height="613" alt=""/>
</div>
<div id="index-09_">
<img id="index_09" src="images/index_09.png" width="360" height="338" alt=""/>
</div>
<div id="Logo_">
<a href="http://s.xodusen.com/WW3rpZ">
<img class="logo" src="images/Logo.png" width="301" height="151" alt=""></a>
</div>
<div id="index-11_">
<img id="index_11" src="images/index_11.png" width="165" height="338" alt=""/>
</div>
<div id="index-12_">
<img id="index_12" src="images/index_12.png" width="301" height="187" alt=""/>
</div>
<div id="index-13_">
<img id="index_13" src="images/index_13.png" width="27" height="548" alt=""/>
</div>
<div id="Slideshow_" class="slideshow">
<a href="http://www.xodusen.com/community">
<img src="images/slideshow.png" width="960" height="305" alt=""></a>
<a href="http://www.xodusen.com/mcurl">
<img src="images/minecraft.png" width="960" height="305" alt=""></a>
<a href="steam://connect/74.121.188.194:27015">
<img src="images/tf2.png" width="960" height="305" alt=""></a>
<a href="steam://connect/74.121.188.195:27015">
<img src="images/CSS.png" width="960" height="305" alt=""></a>
<a href="steam://connect/74.121.188.197:27015">
<img src="images/GM.png" width="960" height="305" alt=""></a>
<a href="aos://3267131722:32887">
<img src="images/aos.png" width="960" height="305" alt=""></a>
<a href="steam://connect/74.121.188.196:27015">
<img src="images/CSGO.png" width="960" height="305" alt=""></a>
</div>
<div id="index-15_">
<img id="index_15" src="images/index_15.png" width="33" height="548" alt=""/>
</div>
<div id="index-16_">
<img id="index_16" src="images/index_16.png" width="960" height="155" alt=""/>
</div>
<div id="index-17_">
<img id="index_17" src="images/index_17.png" width="39" height="88" alt=""/>
</div>
<div id="Copyright_">
<a href="http://www.xodusen.com/community">
<img id="Copyright" src="images/Copyright.png" width="148" height="13" alt=""></a>
</div>
<div id="index-19_">
<img id="index_19" src="images/index_19.png" width="773" height="5" alt=""/>
</div>
<div id="index-20_">
<img id="index_20" src="images/index_20.png" width="526" height="83" alt=""/>
</div>
<div id="Privacy-Policy_">
<a href="http://s.xodusen.com/VhGEkH">
<img id="Privacy_Policy" src="images/Privacy_Policy.png" width="68" height="23" alt=""></a>
</div>
<div id="index-22_">
<img id="index_22" src="images/index_22.png" width="6" height="83" alt=""/>
</div>
<div id="Code-of-Conduct_">
<a href="http://s.xodusen.com/Tf5Gz7">
<img id="Code_of_Conduct" src="images/Code_of_Conduct.png" width="84" height="23" alt=""></a>
</div>
<div id="index-24_">
<img id="index_24" src="images/index_24.png" width="2" height="83" alt=""/>
</div>
<div id="Contact-Us_">
<a href="http://s.xodusen.com/T5EYsG">
<img id="Contact_Us" src="images/Contact_Us.png" width="57" height="23" alt=""></a>
</div>
<div id="index-26_">
<img id="index_26" src="images/index_26.png" width="30" height="83" alt=""/>
</div>
<div id="index-27_">
<img id="index_27" src="images/index_27.png" width="148" height="75" alt=""/>
</div>
<div id="index-28_">
<img id="index_28" src="images/index_28.png" width="68" height="60" alt=""/>
</div>
<div id="index-29_">
<img id="index_29" src="images/index_29.png" width="84" height="60" alt=""/>
</div>
<div id="index-30_">
<img id="index_30" src="images/index_30.png" width="57" height="60" alt=""/>
</div>
</div>
<script type="text/javascript" src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4188748942/apps1.min.js"></script><script type="text/javascript">__CF.AJS.init1();</script></body>
</html>

私の問題は、ウェブサイトの表形式と同じように、ウェブサイトの div 形式で同じ「中央」の結果を得るにはどうすればよいですか?

私は無駄にいくつかの調査を行った.

編集

わかりました、提案をありがとう。私は彼らと協力して、私が達成したい結果を達成しようとします.

前もって感謝します、

〜夢。

score 0 · Accepted Answer

物事を中央に配置し、レイアウトを行う最も簡単な方法は、絶対配置を避けることです。絶対配置を使用しない場合は、次を使用できます

#div {margin-left: auto; margin-right: auto}

レイアウトの特定の部分を中央に配置するための、かなり信頼できる荒削りな方法として。

score 0 · Accepted Answer

気にしないでください、私はそのような問題の背後にある理論 (私はすでに知っていました) を組み合わせ、これを body タグの特定の CSS 要素と組み合わせて、私の Web サイトに固有の中心的な見通しを実現しました。

style.cssのbodyタグのCSSコードをこちらから変更しました。

body {
    width: 1020px;
    margin: 0 auto;
    background-image: url(images/bg.png);
    }

これに;

body{
   left:50%;
   width:1020px;
   margin:0 auto;
   margin-left:510px;
   background-image:url(images/bg.png);
   }

すべての提案をありがとう！

〜夢。

score 0 · Accepted Answer

「最高」を含む div に幅を与え、次に user margin: 0 auto; を与えてみてください。

<style>
#wrapper { width: 1024px; margin: 0 auto; }
</style>
<body>
<div id="wrapper"></div>
</body>

html - XHTML コンテンツを CSS で中央揃えするにはどうすればよいですか?

〜夢。

3 に答える 3

〜夢。

Related

Reference