How to center align link items that are also displayed inline within a flex box

Question

I'm a beginner and I'm trying to do some practice without using youtube tutorials and I can't seem to align my link items in the center of my page. I'm working with flex and flexbox but and I've aligned them into the center but the links will only center align when they're listed in block formatting and not inline formatting. Can anyone help with this?

.container2 {
  /* display: flex; */
  width: 100%;
  height: 50%;
  background-color: rgb(247, 247, 247);
  padding: 2%;
  /* justify-content: center; */
}


/* This is the welcome to iExclusive Producitions section */

.h2container {
  font-family: 'Work Sans', sans-serif;
  display: flex;
  /* position: relative; */
  text-items: center;
  display: flex;
  /* align-items: center; */
  justify-content: center;
}


/* This controls the Featured in Section */

.container2 p {
  display: flex;
  justify-content: center;
  text-transform: uppercase;
}

.container2 a {
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

.container2list li {
  display: inline-flex;
  list-style: none;
  /* This command doesn't remove the underline and text decoration */
  text-decoration: none;
  justify-content: center;
  align-items: center;
}

.container2list a {
  /* This command is what removes the underline and text decoration  */
  text-decoration: none;
  margin: 10px;
  /* align-items: center; */
}

.a1 {
  border: 1px solid rgb(0, 0, 0);
  width: 150px;
  padding: 10px;
  text-decoration: none;
  color: black;
  text-align: center;
}

.a2 {
  border: 1px solid rgb(0, 0, 0);
  width: 150px;
  padding: 10px;
  text-decoration: none;
  color: black;
  text-align: center;
}

.a1:hover {
  background-color: black;
  color: white;
}

.a2:hover {
  background-color: black;
  color: white;
}

.container2list .a1 .a2 {
  display: inline;
  justify-content: center;
}

<main>
  <div class="container2">
    <h2 class="h2container"> Welcome to iExclusive Productions</h2>
    <p>Featured In</p>
    <ul class="container2list">
      <li><a href="https://www.munaluchibridal.com/elegant-and-fun-wedding-in-bristol-pa/" target="_blank" class="a1">Munaluchi Bride</a></li>
      <li><a href="https://www.phillymag.com/philadelphia-wedding/2020/07/06/philadelphia-black-wedding-photographers/" target="_blank" class="a2">PhillyMag</a></li>
    </ul>
  </div>
</main>

score 2 · Answer 1 · answered Jun 27 '22 at 19:33

You just need to add display: flex and justify-content: center to the "ul" element and also remove the left padding.

.container2{
    /* display: flex; */
    width: 100%;
    height: 50%;
    background-color: rgb(247, 247, 247);
    padding: 2%;
    /* justify-content: center; */
}

/* This is the welcome to iExclusive Producitions section */
.h2container {
    font-family: 'Work Sans', sans-serif;
    display: flex;
    /* position: relative; */
    text-items: center;
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

/* This controls the Featured in Section */
.container2 p {
    
    display: flex;
    justify-content: center;
    text-transform: uppercase;
}

.container2 a {
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

.container2list {
  display: flex;
  justify-content: center;
  padding-left: 0;
}

.container2list li {
    display: inline-flex;
    list-style: none;
    /* This command doesn't remove the underline and text decoration */
    text-decoration: none;
    justify-content: center;
    align-items: center;
}

.container2list a {
    /* This command is what removes the underline and text decoration  */
    text-decoration: none;
    margin: 10px;
    /* align-items: center; */
   
}

.a1 {
    border: 1px solid rgb(0, 0, 0);
    width: 150px;
    padding: 10px;
    text-decoration: none;
    color: black;
    text-align: center;
}
.a2 {
    border: 1px solid rgb(0, 0, 0);
    width: 150px;
    padding: 10px;
    text-decoration: none;
    color: black;
    text-align: center;
}

.a1:hover {
    background-color: black;
    color: white;
}
.a2:hover {
    background-color: black;
    color: white;
}

.container2list .a1 .a2 {
    display: inline;
    justify-content: center;
}

<main>
        <div class="container2">
            <h2 class="h2container"> Welcome to iExclusive Productions</h2>
                <p>Featured In</p>
                    <ul class="container2list">
                        <li><a href="https://www.munaluchibridal.com/elegant-and-fun-wedding-in-bristol-pa/" target="_blank" class="a1">Munaluchi Bride</a></li>
                        <li><a href="https://www.phillymag.com/philadelphia-wedding/2020/07/06/philadelphia-black-wedding-photographers/"target="_blank" class="a2">PhillyMag</a></li>
                    </ul>
        </div>
    </main>

How to center align link items that are also displayed inline within a flex box

1 Answers1