私の列を中央揃えにすることができません

Question

私はコーディングに新しく、テスト用のウェブサイトを作成していますが、私は多くの問題に遭遇しました。私はブラウザのサイズを変更すると、1つの列は中央にとどまりますが、もう1つは左に保持されます。コードが正しい列のコードと同じように見えるので、私が間違っていたことは分かりません。

私はマージン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; 
} 

私はあなたが<center>を使用している

my index.html

responsive.css

Answer 1

...私は二つ以上の画像を追加することができますことを願っています。それは一度使用されます。しかし、今日は悪いタグですが、中央に揃えたいimgのクラスを使用する必要があります。display: block; margin: auto;を指定してください。marginはimgのインライン要素では機能しません。

Answer 2

あなたのコラムのいずれかが低い解像度でセンタリングされていないようですが、フルサイズになっています。画像はheightプロパティによって制限され、タグの中央に配置されます。 divを中央に置くには、それらを制限し、中央に余白を付けます。

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