Question

我试图将我的页面上的一些元素垂直和水平居中，但出于某种原因，将容器元素设置为具有自动边距并不使它们居中。任何人都可以解释原因吗？

HTML / CSS

＆＃13;

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

＆＃13;

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

＆＃13;

Pen

Answer 1

因为inline-block以text-align为中心。此外，您的#links没有宽度且为display: block，因此宽度为100％。

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>

Answer 2

添加此CSS应该可以满足您的需求。将display: table和display: table-cell与vertical-align: middle一起使用，您可以将其垂直和水平居中。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

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

进行以下添加。当您对子元素应用display:inline-block时，它们将充当文本，并且默认情况下将它们对齐在左对齐中但是我所做的将把这个属性传递给所有的子元素，所以如果你想让任何子元素左右对齐，你可以在CSS中提到它。

Answer 4

因为您想要以链接为中心并且真实地我建议使用flexbox布局。否则，只能使用display: table-cell; vertical-align: middle;或将边距设置为固定高度来进行垂直对齐。

这是一个代码库，用于说明flexbox布局的使用。 https://codepen.io/anon/pen/KqVwJp

Answer 5

对于水平居中，请 #links display:inline-block或给它一个固定的宽度。对于垂直居中而言，没有简单的方法。让您的父div position:relative并制作#links position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)。使用表AND / OR表格单元并不总是好的技术。

任何人都可以解释为什么某个部分不以我的页面为中心？

5 个答案: