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

您可以使用百分比而不是像素。或者您可以使用在这方面大放异彩的Repsonsive Booststrap 。

于 2012-12-26T18:57:25.050 回答
0

i am trying to make the body centered for all devices with different screen sizes

All devices have different resulotions. So dont use pixels, use percentages. So that it will acquire only the available width.

于 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 回答