不是基本的Div對齊？

我對CSS有點新，並且認爲我試圖做一些簡單的事情。我正在創建一個響應頁面。我的目標是完成以下任務：小於768px的任何內容 - 水平居中每個div。這很正常。在768px和1024px之間，將頁面上的主容器居中放置，兩個div並排放置在主容器div上。目前一切都不集中。寬1024像素及以上 - 左側圖像div，右側文本 - 齊平至導航邊緣。我在這裏得到超級不安的行爲。我相當肯定我錯過了一些相當明顯的事情，因爲我對此很陌生，並且爲了製作我認爲很簡單的東西而大做文章。我一直在考慮這一點。有人可能試圖向我解釋這種情況嗎？我是否通過在媒體查詢中聲明引用代碼來取消某些內容（我注意到自從我在較早時間聲明不匹配的屬性後，我發現有一個問題）？不是基本的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; 
    } 
}

來源

2017-03-23 Jess

這是如何中心一切^^

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

<div>I'm centered<div>

來源

2017-03-24 00:01:40

我把這段代碼放在我的類之外（頂部）。這兩個代碼段都沒有做任何事來幫助我的對齊問題... – Jess

你需要將它應用到你需要的中心... –

那麼，在每個單獨的類中？ – Jess

這樣或那樣。

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

來源

2017-03-24 00:31:41 Jorden1337

不是基本的Div對齊？

回答

相關問題