Question

我目前正在我的投资组合网站上工作，到目前为止。但现在我有问题把中心关于我＆＃34;关于我＆＃34;页面，但我认为我在某处犯了一个错误，因为它没有做我想要的。

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需要位于left图像的avatar侧的infoRight和right侧的avatar侧图像需要位于页面的中心。

我希望给予足够的信息和正确的信息。

感谢。

Answer 1

好的，这些都是错误：

您不需要任何默认样式，例如：shopt -s nullglob和width: 100%;。
让height: auto;清除overflow: hidden; s。
更改float和width的{{1}}以及info-*总结。
使用#image对齐100%居中。
为#avatar img创建虚假边距，使其看起来像是垂直居中。

<强>段

＆＃13;

text-align: center;

＆＃13;

#avatar

＆＃13;

Answer 2

我建议你改进拳击并进入 CSS3 flexbox ！

通过创建另一个块让第一个图标分开 .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;
}

保证金并不是中心

2 个答案: