無法居中對齊我的列

我是編程新手，並且正在製作測試網站，但遇到了許多問題，其中一個問題是我的專欄中心問題。一列保持居中，因爲我改變了瀏覽器的大小，但另一列保持在左邊。我不確定我做錯了什麼，因爲代碼似乎與右列的代碼相同，請幫助。無法居中對齊我的列

我已經嘗試了很多不同的東西：邊距0自動，百分比邊距，填充和其他許多但沒有改變。

只有在學習代碼約一週半...包涵......

responsive.css：

@media screen and (min-width: 800px) { 

/*************************** 
HOME 
***************************/ 

#homecol1 { 
float: left; 
width: 50%; 
max-width: 500px; 
max-height: 600px; 
} 

#homecol2 { 
float: right; 
width: 50%; 
margin-bottom: 15.5%; 
}

的index.html：

<div id="homecol1"> 
<section class="para"> 
    <h4 class="homeinfo">Home</h4> 
    <p class="homeinfo">my paragraph</p> 
</section> 
</div> 
<div id="homecol2"> 
    <div id="treelogo"> 
    <section> 
    <center><img class="treehome" src="img/section-logo.png" 
    alt="tree-logo" height="350" width="350"></center> 
    </section> 
    </div> 
</div>

index.css：

#treelogo { 
transform: scale(0.3); 
margin-right: 40px; 
padding: 0; 
text-align: left; 
} 

.para { 
font-family: 'Josefin Sans', sans-serif; 
font-weight: 400; 
color: #bbb; 
text-align: center; 
margin-top: 100px; 
padding: 0 30px 0 30px; 
font-size: 15px; 
}

我希望我可以添加兩個以上的圖像...

my index.html

responsive.css

來源

2017-07-19 hannacreed

請將您的代碼發佈爲文本而不是圖片。 –

您有檢查瀏覽器大小的媒體查詢。你應該檢查一下。 –

哪裏是中心對齊？我發現唯一的左/右。你可以編輯你的問題並添加'代碼片段'。 – Sergey

您正在使用<center>。它被使用一次。然而，今天它是一個糟糕的標籤，你必須使用一些類來匹配你希望在中心對齊的圖像，那麼你應該指定display: block; margin: auto;，因爲margin對於img是內聯元素不起作用。

來源

2017-07-19 13:23:51 Sergey

看起來你的任何柱子都沒有以較低分辨率爲中心，他們已經有了全角。圖片受高度屬性限制，並由標籤居中。中間divs限制它們並以margin爲中心。

@media screen and (max-width: 800px) { 
#homecol1, #homecol2 { 
    width: 80%; 
    margin: 0 auto; 
} 
}

來源

2017-07-19 13:27:56

這對我來說不起作用，它將垂直堆疊的項目居中，我嘗試製作兩列並將列中的文本居中。 – hannacreed

以div爲中心的文本，你應該使用文本對齊屬性https://www.w3schools.com/cssref/pr_text_text-align.asp –

無法居中對齊我的列

回答

相關問題