.content-settings {
width: 100%;
height: 30rem;
position: relative;
border: 1px solid black;
border-radius: 25px;
margin-left: 1.5rem;
text-align: center;
box-sizing: content-box;
}
.settings-title {
display: inline-block;
border: 1px solid black;
border-radius: 1.5rem;
height: 2.5rem;
line-height: 2.1rem;
width: 95%;
text-align: center;
margin: 1rem 0 2rem 0;
}
.settings-buttons {
border: 1px solid black;
width: 95%;
text-align: center;
margin: 0 auto;
border-radius: 1.5rem;
}
.languages-content {
border: 1px solid black;
width: 95%;
text-align: center;
margin: 0 auto;
border-radius: 1.5rem;
}
.settings-list {
display: flex;
justify-content: center;
align-content: center;
}
.settings-item {
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
height: 5rem;
width: 5rem;
/* margin: 0 5rem; */
line-height: 5rem;
}<div class="content-settings">
<div class="settings-title">
Game Settings
</div>
<div class="settings-buttons">
<ul class="settings-list">
<li class="settings-item">Music</li>
<li class="settings-item">Sound</li>
<li class="settings-item">Info</li>
<li class="settings-item">Tutorials</li>
</ul>
</div>
<div class="languages-content">
<ul class="languages-list">
<li class="languages-item">Romanian</li>
<li class="languages-item">English</li>
<li class="languages-item">Spanish</li>
<li class="languages-item">Turkish</li>
</ul>
</div>
<div class="buttons-wrapper">
<Button>Privacy Policy</Button>
<Button>Terms of Use</Button>
<Button>Credits</Button>
</div>
</div>I want to vertically & horizontally center my circles (which will be some buttons) using flexbox - but for some reason, they only get centered horizontally.
Why doesn't it get centered vertically too? I didn't really use flexbox very much, and I'm using this link to learn: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#basics-and-terminology
according to it, with align-items/align-content: center it should work. (or at least I think so)
Can anybody explain why doesn't it get centered vertically too, and how can I center it?
Thanks!
CodePudding user response：
That's probably because you gave a margin to the circles, it is centered, but the margin-bottom makes it look like it is not centered, change your settings-item class to:
.settings-item {
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
height: 5rem;
width: 5rem;
/* margin: 0 5rem; */
line-height: 5rem;
}
If you want the margin, change your settings-list instead
.settings-list {
display: flex;
justify-content: center;
align-content: center;
margin: 1rem 0;
}
CodePudding user response：
There are a few factors contributing to the issue you're experiencing which I have marked as comments in the CSS below.
A) You should use the align-items css rule instead of align-content to align child elements vertically within a flex container set to flex-direction: row (this is the default).
B) Block-level elements will shrink vertically to fit all child elements unless a height is explicitly set. Without setting a height you won't notice the effect of the vertical alignment since there is no empty space above or below the children.
C) The bottom-margin on each settings-item causes the box model of the elements to change which affects what the browser considers the "center" of the element. By removing this rule the child elements will be aligned by the center of the circle.
.content-settings {
width: 100%;
height: 30rem;
position: relative;
border: 1px solid black;
border-radius: 25px;
margin-left: 1.5rem;
text-align: center;
box-sizing: content-box;
}
.settings-title {
display: inline-block;
border: 1px solid black;
border-radius: 1.5rem;
height: 2.5rem;
line-height: 2.1rem;
width: 95%;
text-align: center;
margin: 1rem 0 2rem 0;
}
.settings-buttons {
border: 1px solid black;
width: 95%;
text-align: center;
margin: 0 auto;
border-radius: 1.5rem;
margin-bottom: 1rem;
}
.languages-content {
border: 1px solid black;
width: 95%;
text-align: center;
margin: 0 auto;
border-radius: 1.5rem;
}
.settings-list {
display: flex;
justify-content: center;
/* align-content: center; */
align-items: center; /* A: use align-items */
height: 6.5rem; /* B: set flex container height */
}
.settings-item {
display: inline-block;
/* margin-bottom: 1.5rem; */ /* C: remove bottom margin */
border-radius: 50%;
border: 1px solid #000;
height: 5rem;
width: 5rem;
/* margin: 0 5rem; */
line-height: 5rem;
}<div class="content-settings">
<div class="settings-title">
Game Settings
</div>
<div class="settings-buttons">
<ul class="settings-list">
<li class="settings-item">Music</li>
<li class="settings-item">Sound</li>
<li class="settings-item">Info</li>
<li class="settings-item">Tutorials</li>
</ul>
</div>
<div class="languages-content">
<ul class="languages-list">
<li class="languages-item">Romanian</li>
<li class="languages-item">English</li>
<li class="languages-item">Spanish</li>
<li class="languages-item">Turkish</li>
</ul>
</div>
<div class="buttons-wrapper">
<Button>Privacy Policy</Button>
<Button>Terms of Use</Button>
<Button>Credits</Button>
</div>
</div>CodePudding user response：
It is because of this rule :
.settings-item {
margin-bottom: 1.5 rem;
}
CodePudding user response：
Add padding: 0; to your settings-list class.
.settings-list {
display: flex;
justify-content: center;
align-content: center;
padding: 0;
}