HTML & CSS : 如何为响应式设计居中 DIV？

Question

所以我有一个非常基本的问题。我正在尝试将最左侧的菜单和内容 div 移动到死点，两边都留白。

但我已经尝试了一切，但没有运气，他们就是不会移动

我对我的代码做了一个 JSfiddle：https://jsfiddle.net/7jsxL7km/

HTML：

<div class="row">
    <div class="col-2 col-m-2 nav">
        <ul>
            <li><a href="index.html">Link</a></li>
            <li><a href="about.html">Link2</a></li>
            <li><a href="product.html">Link3</a></li>
            <li><a href="contact.html">Link4</a></li>
        </ul>
    </div>

    <div class="col-6 col-m-9 content">
        <h1>This is a Header</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in ex augue. Integer bibendum rutrum elit sed fermentum. In hac habitasse platea dictumst. Suspendisse ut ipsum eros. Vestibulum vel est velit. Cras imperdiet metus et hendrerit aliquet. In vel interdum tellus, ac porta enim. Nunc nec turpis mauris. Fusce finibus vel ante id suscipit. Fusce vel sem sit amet nisi aliquam placerat. Fusce eu est porta, pharetra felis et, consectetur libero. Vestibulum a varius nisl. Vestibulum consequat feugiat leo, et sollicitudin justo sagittis eget. Fusce maximus turpis vitae leo suscipit, quis varius massa fermentum. Morbi pharetra elit ut ante tempus imperdiet.

        Phasellus interdum felis justo, sit amet sollicitudin lacus dignissim et. Fusce aliquam, magna ac viverra tempus, enim lorem semper ipsum, at scelerisque risus dolor eget ligula. Donec semper nisl nec erat mollis blandit. Nullam turpis urna, sollicitudin maximus felis id, venenatis tincidunt eros. Sed id nibh at sapien mollis volutpat et ac quam. Sed eleifend velit quis commodo sodales. Suspendisse viverra ullamcorper massa vehicula luctus. Duis ut enim diam. Nunc ut rutrum ipsum. Nunc fringilla odio leo. Nulla nec enim nisl. Nulla in quam blandit, elementum augue sed, lobortis ligula. Fusce accumsan vel ipsum ut aliquet. Donec tempus vehicula velit, finibus laoreet justo ultricies sit amet.</p>
    </div>
</div>

<div class="footer">
    <p>Footer Section</p>
</div>

CSS：

body{
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    /*background-image: url("../Images/WoodenBackground.jpg");*/
    background-color: white;
    text-align: center  
}

.row::after {
    content: "";
    clear: both;
    display: table;
}


/*Floats All Elements to the Left*/
[class*="col-"] {
    float: left;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}


.nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav li{
    padding: 8px;
    margin-bottom: 7px;
    margin-right:7px;
    background-color: grey;
    color: Black;
    text-decoration: none;
    text-align: center;
}

.nav li a{
    text-decoration: none;
    color: Black;
}

.nav li:hover{
    background-color: grey;
}

.nav li:active{
    background-color: grey;
}

.content{
    margin-bottom: 7px;
    background-color: grey;
    color: Black;
    text-align: center;
}

.footer {
    background-color: grey;
    color: Black;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/*Deactive Certain Conditions On Phone*/
@media only screen and (max-width:500px){
    .nav li{
        margin-right:0px;
    }
}

我希望更擅长网络开发的人能告诉我我做错了什么。

Answer 1

第一：您的列大小错误。当您的总列数为 12 时，为了拆分列，您必须进行一些数学运算。例如，当您想要一个主区域 + 一个侧面区域时，使用类似 col-4 的侧边栏和 col-8 的内容 => 4+8=12 等等（另一个示例是 col-2 用于侧边col-10 获取内容）。

第二：如果您需要两边都有白色区域，您必须将您的内容限制在一个具有固定宽度的容器中，并为其设置margin: 0 auto。这将按照您的要求将您的整个内容对齐在中心。

jsfiddle

CSS（更新）：

.container {width:960px;margin: 0 auto;}

HTML（更新）：

<div class="container">
    <div class="row">
        <div class="col-2 col-m-2 nav">
            <ul>
                <li><a href="index.html">Link</a></li>
                <li><a href="about.html">Link2</a></li>
                <li><a href="product.html">Link3</a></li>
                <li><a href="contact.html">Link4</a></li>
            </ul>
        </div>

        <div class="col-10 col-m-10 content">
            ...
        </div>
    </div>
</div>

P.S：这些代码只是我更新的主要代码的一部分。不要复制/粘贴它们。而是使用 Jsfiddle（它已完成）。

P.S-2：您可以将960px 更改为您想要的任何大小。 100% 表示完全响应，1140px 表示现代标准网格大小，960px 表示 960 网格大小。

Answer 2

您可以将一个类添加到包含您要居中的两个项目的 div 中，然后将其显示为 flex display: flex 并设置 flex-direction: center。

Answer 3

要保留在您使用的网格系统中，您可以在使用 .col-2 类的 nav div 之前插入（几乎）空的 DIV，因此跨越网格的 2 列，因此将移动 2 + 6 列元素到水平中心（左留 2 个空列，右留 2 个空列）。

在https://jsfiddle.net/grhpatv3/3/ 的小提琴中，我插入了<div class="col-2"> </div>

（你必须为中等大小找到类似的解决方案 - 但如果所有使用的列的总和是偶数，而不是奇数 -> 看我的小提琴）