Social Links Profile

Community feedback

• 

  Lemnsa•110

  @LemnsaPosted 4 months ago

  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!

  0

  ---

  

  Eugene Clark•50

  @clarkjr2016Posted 4 months ago

  @Lemnsa Thank you for your reply! This does help with horizontal centering. Do you have any recommendations for vertical centering?

  0

  

  Lemnsa•110

  @LemnsaPosted 4 months ago

  @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 */
  }
  

  0