CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 686

Can anyone explain why a section isn't centering on my page?

I'm trying to center a few elements on my page vertically and horizontally, but for some reason, setting the container element to have a margin of auto isn't centering them. Can anyone explain why?

HTML/CSS

body{
	margin: 0;
	padding: 0;
	background-color: rgb(0, 0, 0);
}

#links{
	margin: auto;
}

.link{
	display: inline-block;
	margin: 0 2%;
	width: 15vw;
	height: 15vw;
	border: 2px solid rgb(100, 100, 0);
	border-radius: 50%;
	background-image: url("line.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-color: rgb(0, 0, 50);
}

.link:first-of-type{
	margin-left: 0;
}

.link:last-of-type{
	margin-right: 0;
}
<div id="landingpage">
    <section id="links">
        <div class="link" id="home"></div>
        <div class="link" id="work"></div>
        <div class="link" id="contact"></div>
    </section>
</div>

Pen

Upvotes: 0

Views: 217

Answers (5)

enapupe
enapupe

Reputation: 17049

Because inline-block you center with text-align. Also, your #links has no width and is display: block, so it is 100% wide.

https://codepen.io/anon/pen/GEogXY

body{
	margin: 0;
	padding: 0;
	background-color: rgb(0, 0, 0);
}

#links{
	text-align: center;
}

.link{
	display: inline-block;
	margin: 0 2%;
	width: 15vw;
	height: 15vw;
	border: 2px solid rgb(100, 100, 0);
	border-radius: 50%;
	background-color: rgb(0, 0, 50);
}

.link:first-of-type{
	margin-left: 0;
}

.link:last-of-type{
	margin-right: 0;
}
<div id="landingpage">
    <section id="links">
        <div class="link" id="home"></div>
        <div class="link" id="work"></div>
        <div class="link" id="contact"></div>
    </section>
</div>

Upvotes: 1

Axion
Axion

Reputation: 722

Adding this CSS should do what you need. Using display: table and display: table-cell with a vertical-align: middle will allow you to center it both vertically and horizontally. 

#landingpage {
    width: 100%;
    height: 100vh;
    display: table;
    text-align: center;
}

#links{
    margin: auto;
    display: table-cell;
    vertical-align: middle;
}


body{
    margin: 0;
    padding: 0;
    background-color: rgb(0, 0, 0);
}

#landingpage {
    width: 100%;
    height: 100vh;
    display: table;
    text-align: center;
}

#links{
    margin: auto;
    display: table-cell;
    vertical-align: middle;
}

.link{
    display: inline-block;
    margin: 0 2%;
    width: 15vw;
    height: 15vw;
    border: 2px solid rgb(100, 100, 0);
    border-radius: 50%;
    background-image: url("line.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: rgb(0, 0, 50);
}

.link:first-of-type{
    margin-left: 0;
}

.link:last-of-type{
    margin-right: 0;
}
<div id="landingpage">
    <section id="links">
        <div class="link" id="home"></div>
        <div class="link" id="work"></div>
        <div class="link" id="contact"></div>
    </section>
</div>

Codepen: https://codepen.io/anon/pen/owbgQp

Upvotes: 0

Sudhanshu Saini
Sudhanshu Saini

Reputation: 63

#link{
    margin : auto;
    text-align : center;
}

Do the following additions. When you apply display:inline-block on the children elements, they act as a text and by default align themselves in left align.
But what I have done will pass on this property to all the children elements, so if in case you want any of the children elements to align left or right, you may mention that in CSS.

Upvotes: 0

Foysal Remon
Foysal Remon

Reputation: 301

For horizontal centering make #linksdisplay:inline-block or give it a fixed width. And for vertical centering there is no simple way. Make your parent div position:relative and make #links position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%). Using table AND/OR table cell is not always good technique.

Upvotes: 0

ShabbY
ShabbY

Reputation: 896

since you want to center your links horzontally and veritically I suggest to go with the flexbox layout. otherwise vertical alignment would only be possible using display: table-cell; vertical-align: middle; or setting margins for fixed heights.

here is a codepen that illustrates the use of the flexbox layout. https://codepen.io/anon/pen/KqVwJp

Upvotes: 0

Related Questions