How do I center these list items within their grid item, but also have them start at the same vertically aligned axis

Question

everyone.

I am trying to create a footer for contact information on a webpage. When I center these items within their grid item they don't start at the same position because they are different lengths.

There must be something I'm missing that is not allowing me to achieve this.

Thanks in advance to anyone who helps.

CSS:

.text-styles {

list-style: none;
font-family: 'Roboto', sans-serif;
font-size: 100%;
letter-spacing: 2px;

}

.contact-text {

color: rgba(99, 99, 99, 1.0);
text-decoration: none;

}

.foot-list {

text-align: left;

HTML:

<section class="p-5 bg-warning">
    
        <div class="container">
    <div class="row">
              <ul class="col contact-text m-0 foot-list">
                <li class="text-styles text-center">
                    <img class="social-icon m-3" src="./images/phone.png">Ruth: 888 888 888
                    
                </li>
                <li class="text-styles text-center">
                    <img class="social-icon m-3" src="./images/phone.png">Lisa: 888 888 888
                    
                </li>
              </ul>

              <ul class="col contact-text m-0 foot-list">
                <li class="text-styles text-center">
                    <a class="social-link text-styles" href="#"><img class="social-icon m-3" src="./images/instagram.png">@xxxxxxxxxxxxxxxxx
                    
                </li>
                <li class="text-styles text-center">
                    <img class="social-icon m-3" src="./images/gmail.png">xxxxxxxxxxxxxx@gmail.com
                    
                </li>
              </ul>
        </div>
    
</section>

I have tried different variation of grid and flexbox to achieve my goal but have been unable to get the desired result.

Your desired result is not clear from your question. Please edit your question to clarify both your desired result and your actual results. — Brett Donald, Aug 07 '23 at 05:20
Your two conditions are mutually exclusive. They can either be all centered within their divs OR align their tops, not both. — Paulie_D, Aug 07 '23 at 06:45
See also https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Aug 07 '23 at 06:46

Brett Donald · Answer 1 · 2023-08-09T07:26:16.550

Perhaps you need justify-items: center;?

A Complete Guide to CSS Grid

.d1 {
  display: grid;
  gap: 3em;
  justify-items: center;
  border: 1px solid red;
}

.d1>div {
  border: 1px solid lime;
}

.d1 ul {
  padding: 0;
  border: 1px solid blue;
}

.d1 li {
  list-style: none;
  font-family: sans-serif;
  letter-spacing: 2px;
}

.d1 img {
  width: 20px;
  margin-right: 10px;
  vertical-align: middle;
}

<div class="d1">
  <div>
    <ul>
      <li>
        <img src="https://cdn-icons-png.flaticon.com/512/2198/2198371.png">Ruth: 888 888 888
      </li>
      <li>
        <img src="https://cdn-icons-png.flaticon.com/512/2198/2198371.png">Lisa: 888 888 888
      </li>
    </ul>
    <ul>
      <li>
        <img src="https://cdn-icons-png.flaticon.com/512/174/174855.png">
        @xxxxxxxxxxxxxxxxx
      </li>
      <li>
        <img src="https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png">
        xxxxxxxxxxxxxx@gmail.com
      </li>
    </ul>
  </div>
</div>

Update

You want the <ul> elements beside each other?

.d1 {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3em;
  justify-content: center;
  border: 1px solid red;
}

.d1>div {
  border: 1px solid lime;
}

.d1 ul {
  padding: 0;
  border: 1px solid blue;
}

.d1 li {
  list-style: none;
  font-family: sans-serif;
  letter-spacing: 2px;
}

.d1 img {
  width: 20px;
  margin-right: 10px;
  vertical-align: middle;
}

<div class="d1">
  <ul>
    <li>
      <img src="https://cdn-icons-png.flaticon.com/512/2198/2198371.png">Ruth: 888 888 888
    </li>
    <li>
      <img src="https://cdn-icons-png.flaticon.com/512/2198/2198371.png">Lisa: 888 888 888
    </li>
  </ul>
  <ul>
    <li>
      <img src="https://cdn-icons-png.flaticon.com/512/174/174855.png">
      @xxxxxxxxxxxxxxxxx
    </li>
    <li>
      <img src="https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png">
      xxxxxxxxxxxxxx@gmail.com
    </li>
  </ul>
</div>

Thanks for you answer, I will give this a try and see if I can get a result I am happy with. I still want the 2 lists beside each other. I'll see if I can adjust what you said to achieve this. — Scuzzins, Aug 09 '23 at 04:52
You want the lists beside each other? I've updated my answer to add a second snippet which demonstrates this. But I still don't really understand the initial problem you were having. Your question isn't clear enough. — Brett Donald, Aug 09 '23 at 07:27

How do I center these list items within their grid item, but also have them start at the same vertically aligned axis

1 Answers1