Kann meine Spalte nicht zentrieren

Question

Ich bin neu im Codieren und erstelle eine Testwebseite, aber ich habe viele Probleme festgestellt, von denen eine meine Spalten zentriert. Eine Spalte bleibt zentriert, wenn ich die Browsergröße ändere, aber die andere bleibt nur links. Ich bin mir nicht sicher, was ich falsch gemacht habe, weil der Code der Code für die rechte Spalte zu sein scheint, bitte helfen Sie.

Ich habe viele verschiedene Dinge ausprobiert: Rand 0 Auto, Rand mit Prozentsätzen, Polsterung und viele andere, aber nichts geändert.

Nur für etwa eine Woche und eine Hälfte ... Bär mit mir Learning-Code ...

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; 
} 

Ich wünsche, dass ich mehr als zwei Bilder ...

my index.html

responsive.css

Answer 1

Sie verwenden den <center> hinzufügen könnte. Und es wird einmal benutzt. Aber es ist ein schlechtes Tag für heute, Sie müssen eine Klasse für Imgs verwenden, die Sie in der Mitte ausrichten möchten, dann sollten Sie display: block; margin: auto; angeben, da margin nicht für Inline-Elemente funktioniert, die img sind.

Answer 2

Es scheint, dass alle Ihre Spalten nicht mit niedrigerer Auflösung zentriert sind, sie haben volle Breite. Das Bild wird durch die Eigenschaft height begrenzt und durch das Tag zentriert. Zum Zentrieren divs begrenzen sie und zentrieren mit Rand z.

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