保证金不居中

Question

I am currently working on my portfolio website and so far. But now I am having problem to center the "about me" page but i think i made a mistake somewhere because it doesn't do what i want.

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

so What I want is.

infoLeft needs to be on the left side of the avatar and infoRight on the right side of the avatar image and the image needs to be in the center of the page.

I hope i gave given enough and the right information.

Thanks.

Answer 1

Okay, so these are the mistakes:

1. You don't need any default styles like: width: 100%; and height: auto; .
2. Give overflow: hidden; to clear the float s.
3. Change the width s of the info-* and #image to sum up to 100% .
4. Align the #avatar img centered by using text-align: center; .
5. Create a faux margin for the #avatar to look like it is vertically centered.

Snippet

 .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

I advise you to improve your boxing and get into the CSS3 flexbox !

1. Let the first icon div apart by creating another block .flex-center for centering the content.
2. The same inside for the avatar, just to center it vertically.
3. Then, move the width: 18% to the level of #avatar-container.
4. Then add the correct flex properties to flex-center and avatar-container.

5. Also, remove the auto height.

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

and

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