边距不居中

Question

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

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 图像的 right 一侧图片需要位于页面中央。

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

谢谢。

Answer 1

好的，下面是错误：

您不需要任何默认样式，例如：width: 100%; 和 height: auto;。
给 overflow: hidden; 清除 floats。
更改 info-* 和 #image 的 width 总和为 100%。
使用 text-align: center; 将 #avatar img 居中对齐。
为 #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>

Answer 2

劝你练练拳，进CSS3 flexbox!

通过创建另一个块让第一个图标 div 分开 .flex-center 用于居中内容。
内部相同头像，只是垂直居中。
然后，移动宽度：18% 达到#avatar-container 的水平。
然后添加正确的flex flex-center 和 avatar-container 的属性。

此外，删除自动高度。

<div class="flex-center">
    <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-container">
        <div id="avatar">
            <img src="images/avatarMe.png" />
        </div>
    </div>

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

和

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

#avatar-container {
  width: 18%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.flex-center {
  display: flex;
  justify-content: center;
}

边距不居中

Margin doesn't center

html

css

center

margin