0

画面サイズが異なるすべてのデバイスでボディを中央に配置しようとしています

白い背景部分を中央に配置する必要があります

http://jsfiddle.net/ymnkg/1/

http://jsfiddle.net/ymnkg/1/embedded/result/

以下の私のコードを提供する

<body class="home">

    <div id="redColor">
        <header style="background-color: white; width: 1224px; margin-left: 339px;">
            <div class="inner clearfix"><div class="logo">
              <a href="">          
                  <img alt="Splitwise" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo.png">
              </a>
            </div>

        </header>
        <div id="banner" class="clearfix" style="border-bottom: 5px solid #C3C3C3; width: 1223px;">
            <div class="bx-wrapper" style="width:1227px; position:relative; margin-top: 0px;">
                <div class="bx-window" style="position:relative; overflow:hidden; width:1227px;">
                    <ul id="slider1" style="width: 999999px; position: relative; left: -1227px;">
                        <li style="width: 1227px; float: left; list-style: none;" class="pager">
                                <a href=""><img src="http://www.defie.co/designerImages/frontpage_rotate1.png" alt="banner 1" border="0"></a>
                            </li>
                            <li style="width: 1227px; float: left; list-style: none;" class="pager">
                                <a href=""><img src="http://www.defie.co/designerImages/frontpage_rotate2.png" alt="banner 2" border="0"></a>
                            </li>
                            <li style="width: 1227px; float: left; list-style: none;" class="pager">
                                <a href=""><img src="http://www.defie.co/designerImages/frontpage_rotate3.png" alt="banner 3" border="0"></a>
                            </li>
                    </ul>
                </div>
            </div>
        </div>
        <section id="main" style="background-color: #646464; padding: 0px;">
            <div class="inner clearfix" style="background-color: white; width: 1223px;">
                <span style="color: #06546a; font-weight: bold; font-size: 14px; background-color: white;">Defie Cloud Buisness Solution offers features and functionality for business - today and tomorrow</span>
                <div id="primary">
                    <section class="primary">
                        <ul style="width: 800px;">
                            <li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
                                <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                    <span style="color: red;">Accounting and Finance:</span> Sales and Customer Management
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
                                <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                    <span style="color: red;">Buisness Operation Package:</span> Purchasing and Vendor Management, Inventory Management, Build of Materials, Real-Time Production, Product Life Cycle, QA Management
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
                                <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png"><span style="color: red;">Customer Relationship Management</span>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
                                <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                <span style="color: red;">Cloud File and Document Apps:</span> Store, Manage, Share, Access and Modify anytime, anywhere on any devices
                            </li>
                            <li style="padding-bottom: 5px; list-style: none;">
                                <img alt="squareList" style="margin-right: 10px; font-size: 13px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                <span style="color: red;">Cloud Buisness Management:</span> From Front to Back Office, z from Hardware to Software, from Desktops to Servers Solution and Support
                            </li>
                        </ul>
                    </section>
                </div>

            </div>
        </section>
        <ul id="eM" style="width: 1228px; margin-left: 80px; background-color:#646464;">
            <li id="eMli"><a id="eMlia" href="#home">Product</a></li>
            <li id="eMli"><a id="eMlia" href="#news">Solutions</a></li>
            <li id="eMli"><a id="eMlia" href="#contact">Solutions</a></li>
            <li id="eMli"><a id="eMlia" href="#about">Partners</a></li>
            <li id="eMli"><a id="eMlia" href="#news">About</a></li>
            <li id="eMli"><a id="eMlia" href="#contact">Home</a></li>
            <li id="eMli"><a id="eMlia" href="#about">Login</a></li>
        </ul>
    </div>


</body>
4

3 に答える 3

1

ピクセルの代わりにパーセンテージを使用できます。または、この面で優れたResponsive Booststrapを使用することもできます。

于 2012-12-26T18:57:25.050 に答える
0

画面サイズが異なるすべてのデバイスでボディを中央に配置しようとしています

すべてのデバイスには異なる解像度があります。したがって、ピクセルを使用しないで、パーセンテージを使用してください。利用可能な幅だけを取得するようにします。

于 2012-12-26T19:14:07.950 に答える
0

次のようなものを使用できます。

.home{
    width: 85%; //Give a width so you can see it is centered
    margin: 0 auto; //This is for centering the page
    overflow-x: hidden;
}

css メディア クエリを記述して、小さな画面で見栄えを良くすることができます。

于 2012-12-26T19:30:22.330 に答える