Question

我正在尝试让所有具有不同屏幕尺寸的设备的机身居中

白色背景部分应居中

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>

Answer 1

您可以使用百分比而不是像素。或者你可以使用Repsonsive Booststrap在这方面发光。

Answer 2

我正在尝试使所有具有不同屏幕尺寸的设备的主体居中

所有设备都有不同的结果。所以不要使用像素，使用百分比。这样它只能获得可用的宽度。

Answer 3

您可以使用以下内容：

.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 media queries以使其在小屏幕中看起来很好。

身体以不同的设备为中心

3 个答案: