html - 无法居中对齐我的列

Question

我是编码新手，正在制作一个测试网站，但我遇到了很多问题，其中之一就是让我的栏目居中。当我更改浏览器大小时，一列保持居中，但另一列保持在左侧。我不确定我做错了什么，因为代码似乎与右列的代码相同，请帮忙。

我尝试了很多不同的东西:margin 0 auto、margin with percentages、padding 和许多其他东西，但没有任何改变。

只学习了大约一个半星期的代码...请耐心等待...

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

Answer 1

您正在使用 <center> .而且只用一次。然而，这对今天来说是一个糟糕的标签，你必须为你想要居中对齐的图像使用一些类，然后你应该指定 display: block; margin: auto;因为margin不适用于 img 所在的内联元素。