html - 边距不居中

Question

我目前正在制作我的投资组合网站，到目前为止。但现在 我在将“关于我”页面居中时遇到问题，但我认为我在某处犯了一个错误，因为它没有按照我的要求进行。

HTML:

<div class="pageAbout">

        <div id="icon">
            <img src="images/iconAbout.png" />
        </div>

        <div id="infoLeft">
            <h3>Name</h3>
                <p>Jeffrey van der Heijden</p>
            <h3>Birthday</h3>
                <p>-</p>
            <h3>Hobbies</h3>
                <p>hanging around with friends and family</p>
        </div>

        <div id="avatar">
            <img src="images/avatarMe.png" />
        </div>

        <div id="infoRight">
            <h3>Place of birth</h3>
                <p>Eindhoven</p>
            <h3>Phone</h3>
                <p>-</p>
            <h3>Email</h3>
                <p>-</p>
        </div>
</div>`

CSS:

.pageAbout{
width: 100%;
height: auto;
background-color: #e5e5e5;
padding-top: 1%;
} 

h3{
font-family: Aller_regular;
font-size: 16px;
} 

p{
font-family: Aller_regular;
font-size: 14px;
margin: 2% 0px;
}

#infoLeft{
width: 12%;
height: auto;
float: left;
margin-top: 2%;
text-align: right;
}

#avatar{
width: 18%;
height: auto;
float: left;
margin-top: 2%;
text-align: center;
}

#infoRight{
width: 12%;
height: auto;
float: left;
margin-top: 2%;
text-align: left;
}

所以我想要的是。

infoLeft 需要在 avatar 的left 侧，infoRight 在右侧 avatar 图片的一侧，图片需要位于页面的中央。

我希望我提供了足够的正确信息。

谢谢。

Answer 1

好的，这些是错误:

1. 您不需要任何默认样式，例如:width: 100%; 和 height: auto;。
2. 给 overflow: hidden; 来清除 float。
3. 更改 info-* 和 #image 的 width 总和为 100%。
4. 使用 text-align: center; 将 #avatar img 居中对齐。
5. 为 #avatar 创建一个人造边距，使其看起来像垂直居中。

片段

.pageAbout {
  background-color: #e5e5e5;
  padding-top: 1%;
  overflow: hidden;
} 

h3 {
  font-family: Aller_regular;
  font-size: 16px;
} 

p{
  font-family: Aller_regular;
  font-size: 14px;
  margin: 2% 0px;
}

#infoLeft{
  width: 30%;
  height: auto;
  float: left;
  margin-top: 2%;
  text-align: right;
}

#avatar {
  width: 40%;
  height: auto;
  float: left;
  margin-top: 10%;
  text-align: center;
}

#avatar img {
  display: inline-block;
}

#infoRight{
  width: 30%;
  height: auto;
  float: left;
  margin-top: 2%;
  text-align: left;
}

<div class="pageAbout">

  <div id="icon">
    <img src="images/iconAbout.png" />
  </div>

  <div id="infoLeft">
    <h3>Name</h3>
    <p>Jeffrey van der Heijden</p>
    <h3>Birthday</h3>
    <p>-</p>
    <h3>Hobbies</h3>
    <p>hanging around with friends and family</p>
  </div>

  <div id="avatar">
    <img src="images/avatarMe.png" />
  </div>

  <div id="infoRight">
    <h3>Place of birth</h3>
    <p>Eindhoven</p>
    <h3>Phone</h3>
    <p>-</p>
    <h3>Email</h3>
    <p>-</p>
  </div>
</div>