HTML

Question

您好我是html / css的新手，我想知道如何居中div，以便当我切换到不同的显示器时，它们将保持在同一个位置。

目前的问题是，当我切换显示器时，标题会移动，以便它不会与下面的大div的边缘对齐。如果你将监视器中每个部分拉伸的内容切换到新监视器

，我希望如此

This is what it looks like on one monitor This is what it looks like on second monitor 我喜欢它，所以标题标题与div框对齐，无论它显示在哪个显示器上。那么在一台显示器上它是如何在另一台显示器上显示的

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>About</title>
        <link rel="stylesheet" type="text/css" href="about.css">
        <script>    </script>
    </head>
    <body>

    <div class="mainContainer">

        <div class="header">

            <div id="headerTopSection">
                <div id="titleWordsWrapper">
                    <div id="titleHeaderTailored">Tailored
                        <div id="titleHeaderSystems">Systems</div>
                    </div>
                </div>

                <div id="productsAndInformationWrapper">
                <div id="contactUs">Contact</div>
                <div id="products">Products</div>
                </div>
            </div>
        </div>
            <div id="midSection">Need this to stay the same</div>

    </div>
    </body>
    </html>

CSS

div{
    border-style:solid;
    border-width:1px;
    border-color:white;
}
html{
    height: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
body{
        background-color: #252322;
}
.mainContainer{
    margin-left:auto;
    margin-right:auto;
    width: auto;
    height: 400px;
}
.header{
    background-color: #252322;
    font-family: arial, sans-serif;
    height: 80px;
    overflow: hidden;
    padding-top: 19px;
}
#headerTopSection{
    height: 80px;
    width: auto: 0px;
}
#titleWordsWrapper{
    width: 350px;
    height: 50px;
    float: left;
}

#titleHeaderTailored{
    color: white;
    font-size: 30px;

}
#titleHeaderSystems{
    color: yellow;
    display: inline-block;
    font-size: 30px;
}
#productsAndInformationWrapper{
    width: 350px;
    height: 50px;
    float: right;
}
#products{
    float: right;
    color: white;
    font-size: 30px;
    padding-right: 20px;

}
#contactUs{
    float: right;
    color: white;
    font-size: 30px;
}
#midSection{
    height: 200px;
    width: 1000px;
    background-color: #282625;
    clear: left;
    margin-left: auto;
    margin-right: auto;
    color: white;
}

Answer 1

您在margin-left: auto;上使用#midSection因此它肯定会在中心自动对齐。要获得你想要的东西，修复

的值

 margin-left: 120px    <---change value accordingly

试图集中我的div，以便当我切换显示器时，它们保持相同的大小

HTML

CSS

1 个答案: