Question

我对CSS有些新意，并认为我试图做一些简单的事情。我正在创建一个响应式页面。我的目标是完成以下任务：任何小于768px的东西 - 每个div水平居中。这种情况发生得很好。在768px和1024px之间，将页面上的主容器居中，两个div并排主容器div。目前一切都不是中心。 1024px宽大及以上 - 左侧是图像div，右侧是文本 - 与导航边缘齐平。我在这里得到了超级不稳定的行为。我相当肯定我已经错过了一些相当明显的东西，因为我对此非常陌生，并且已经开始先做一些我认为很简单的事情。我已经看了很长时间了。有人试图向我解释这个场景吗？我通过在我的媒体查询中声明引用代码来使某些东西无效（我注意到我有一个问题，因为我在较早时间声明了不匹配的属性）？

    <body>
    <header>
        <img class="style-logo" src="Prism_images/RuckerLogo.png" alt="Logo">
        <nav class="style-nav">
            <ul>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="Content">
    <div class ="style-img">
            <img src="Prism_images/Miles---Headshot_200.png">
    </div>
    <div class="style-main" id="Text">
        <p>premire cabinetmaker</p>
    </div>
</div>
<footer></footer>
</body>

这是CSS：

 header {
    padding: 20px;
}

.style-logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color: antiquewhite;
}

.style-nav ul {
    list-style-type: none;
    display: block;
    padding: 0px;
}

.style-nav ul li a {
    text-decoration: none;
    color: #414040;
    text-align: center;
    display: block;
    text-transform:uppercase;
    padding: 2px;
}
.style-img {
    margin-left:auto;
    margin-right:auto;
    width: 200px;
}

.style-main {
    margin-left:auto;
    margin-right:auto;
    width: 450px;
}
.style-main p {
    color: slategrey;
    text-align:left;
    margin-top:0px;
    margin-left:10px;
    display:block;
}
#Content{
    margin-left:auto;
    margin-right:auto;
}

/*Tablet View*/

@media (min-width: 768px){

    body {
        max-width: 778px;
    }
    .style-logo {
        float: center;
    }
    .style-nav ul li {
        display: inline-block;
    }

    .style-nav ul {
        text-align: center;
    }
    .style-img{
        margin-top:0px;
        width:200px;
        display:inline-block;
        }
    .style-main {
        margin-top:0px; 
        display:inline-block;
        }
    #Content {
        margin-left:auto;
        margin-right:auto;
        display:block;
    }
}
@media (min-width: 1024px){

    body {
        max-width: 1100px;
    }

    .style-logo {
        float: left;
    }

    .style-nav {
        float: right;   
    }
    .style-img {
        margin-top: 40px;
        float:right;
        display:inline-block;
    }
    .style-main {
        padding:20px;
        display: inline-block;
    }
}

Answer 1

这是如何集中所有内容^^

＆＃13;

div {
  display: table;
  margin: 0 auto;
}

＆＃13;

<div>I'm centered<div>

＆＃13;

Answer 2

那或那个。

div {
  display:block;
  margin:0 auto;
}

不那么基本的Div对齐？

2 个答案: