Question

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

我尝试了很多不同的东西：保证金0自动，保证金百分比，填充，以及许多其他但没有改变。

只有大约一个半星期的学习代码......忍受我......

responsive.css：

proprieteService

index.html：

@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.css：

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

我希望我能添加两张以上的图片......

my index.html

responsive.css

Answer 1

您正在使用<center>。它只使用一次。但是，它今天是一个糟糕的标记，你必须使用一些类来表示你想要在中心对齐的imgs，然后你应该指定display: block; margin: auto;，因为margin不适用于内联元素img是。

Answer 2

似乎你的任何一个colums都不是以较低的分辨率为中心，它们已经全宽。图像受高度属性限制，并以标记为中心。以div为中心限制它们并以边距为中心，例如

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

无法居中对齐我的列

2 个答案: