@Lemnsa
Posted
Congratulations @clarkjr2016 on completing this task!
Sure, there is way to easily center texts in a child element found in its parent's.
General case
Example:
Let's say you have a <span> tag inside a <div> tag, and you want to center-align the text inside the <span> tag.
HTML
<div class="container">
<span class="centered-text">Centered Text</span>
</div>
CSS
.container {
text-align: center; /* Center-align text within the container, horizontally */
}
.centered-text {
display: inline-block; /* Ensures the span takes only as much width as necessary */
}
In short, applying text-align: center; to the parent, centers the child.
So in our case, text-align: center is applied to the <li> tag.
Hope you grab the concept and it solves the problem, even if it doesn't stick, always refer back to your learning materials!
@clarkjr2016
Posted
@Lemnsa Thank you for your reply! This does help with horizontal centering. Do you have any recommendations for vertical centering?
@Lemnsa
Posted
@clarkjr2016
Sure
By using flexbox (modern css)
In the parent, apply:
.container {
display: flex;
justify-content: center; /* Horizontally center the flex items */
align-items: center; /* Vertically center the flex items */
}
