Question

我似乎无法弄清楚如何对齐这些div中的一些（主要是居中）。我希望页面看起来尽可能接近这个图像：

http://s7.postimg.org/saf158dqj/Test_Img.jpg

即 1）我希望标题中的文本垂直居中（我想把它放在一个单独的div中，bg颜色为黑色）; 2）我希望身体内的单独的方形彩色div在屏幕上等间隔并居中（最好是相对于屏幕尺寸）; 3）我希望页脚（小时和文本）跨越整个底部，只是在黑色div的边缘之外（版权向左浮动，接触浮动向右），尽管当前代码向左移动。

以下是我目前的代码（对不起）：提前感谢您的帮助！

<html>

    /* Styles for All Pages */

    html {
        height: 100%;
    }

    body {
        /* Sizing Properties */
        height: 100%;
        margin:0;
        padding:0;
        background-color: white;
        color: white;
    }

    header, footer, nav { 
        display: block; 
    }

    #innerBodyDiv {
        height: 100%;
        margin: 0% 10% 0% 10%; /*Leaves space on left and right to show background */
        background-color: black;
    }

    /* Styles for Header & Footer */

        /* Header */

        #header {

            height: 10%;
            width: auto;
            background-color: teal;
        }

        #header a ,a:hover, a:visited{
            color:white;
            text-decoration: none;
        }

        #divInHeader {
            text-align: center;
            font-family: Microsoft PhagsPa;
        }

        /* Home Page Nav Divs Properties */

        #divOuterHomePageNav {

        }

        divInnerHomePageNav {

        }

        .squaresBox {
            height: 100px;
            width: 100px;
            text-align: center;
        }   

        .squaresText {
            text-align: center;
            color: black;
            text-decoration: none;
        }

        .leftFloat {
            float: left;
        }

        .clear {
            clear: both;
        }

        /* Header & Footer Styles */

        #footer {
            position:absolute;
            bottom:0;
            color: white;
            padding: 5px 10px 10px 10px;
        }

        #copyright {
            float:left;
        }

        #contact {
            float:right;
        }

        #footer a{
            color: teal;
            text-decoration:none;
        }

        #footer a:hover, a:visited:hover{
            color: white;
        }


        #footerText {
            padding: 0px 10px 0px 10px;
        }


        /* HomePage Nav and Multi-Page Nav Colors */

        .colorWebDesign {
            background-color: #0b8140;
        }

        .colorGraphicDesign {
            background-color: #35459c;
        }

        .colorPhotography {
            background-color: #4d2a7c;
        }

        .colorVideo {
            background-color: #e9292a;
        }

        .colorAudio {
            background-color: #faa41a;
        }

        .colorWriting {
            background-color: #FFD801;
        }



 </STYLE>

<div id="innerBodyDiv">

    <!-- Header -->
    <header id="header">
    <a href="index.html">
        <div id="divInHeader">
            <h1>My Name</h1>
        </div>
    </a>
    </header>

    <!-- Home Page Nav -->
    <div id="divOuterHomePageNav">
        <div id="divInnerHomePageNav">
            <a href="webdesign.html">
                <div class="squaresBox leftFloat colorWebDesign">
                    <span class="squaresText">Web <br> Design</span>
                </div>
            </a>
            <a href="graphicdesign.html" >
                <div class="squaresBox leftFloat colorGraphicDesign">
                    <span class="squaresText">Graphic <br> Design</span>
                </div>
            </a>

                <div class="squaresBox leftFloat colorPhotography">
                    <span class="squaresText">Photography</span>
                </div>

            <div class="clear"></div>

            <a href="video.html" >
                <div class="squaresBox leftFloat colorVideo">
                    <span class="squaresText">Video</span>
                </div>
            </a>
            <a href="audio.html" >
                <div class="squaresBox leftFloat colorAudio">
                    <span class="squaresText">Audio</span>
                </div>
            </a>
            <a href="writing.html" >
                <div class="squaresBox leftFloat colorWriting">
                    <span class="squaresText">Creative <br> Writing</span>
                </div>
            </a>

            <div class="clear"></div>
        </div>
    </div>

    <br>

    <footer id="footer">

        <hr>
        <div id="footerText">
            <span id="copyright">&copy; Copyright</span>
            <a href="contact.html" id="contact">Contact</a>
        </div>
    </footer>

</div>

Answer 1

对于CSS中的每个<div>，请使用：

margin-left: auto;
margin-right: auto;

Answer 2

之前我必须做这样的事情，你试过吗

text-align: center;

CSS页面中的

？

HTML Div Alignment

2 个答案: