Classic alignment difficulties between two row elements in the html vs css-CodePudding

Hello dear stack overflow citizens. I have a boring problem with two elements (watch code snippet below) but unfortunately, I ought to resolve it. I'll be grateful for any help or advice.

I need final result like this

enter image description here

In the circle with background: grey I positioned a relative social media links(.social__icon>img). I can’t load svg files from assets here. You can watch the screenshot with my embarrassing acts:

enter image description here

I don't have enough reputation to embed screenshots, I hope you can watch it somehow.

If not, it should look something like this:

social media link img margin left:12px socila media text-name also realative link img with hover and animation effects

They both needs to work like one in a row

Example

I'm facebook svg icon in the grey ellips 12px-left Facebook

Thats result with

.social__icon {
  display: inline-flex; /* Changed */
  align-items: center; /* Added */

enter image description here

ol,
ul,
li,
menu {
  list-style: none;
}

a {
  text-decoration: none;
}

.social__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social__icon {
  display: inline-block;
  text-align: center;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: rgba(196, 196, 196, 0.5);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.social__icon img {
  vertical-align: middle;
}

.social__icon span {}

.social__icon:active {
  background: #4B9200;
  color: #4B9200;
}

.social__icon:hover {
  animation: shake 500ms ease-in-out forwards;
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

<div >
  <ul >
    <li>
      <a  href="https://en-gb.facebook.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/fb.svg" alt="">
        <span>Facebook</span>
      </a>

    </li>
    <li>
      <a  href="https://twitter.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/twtr.svg" alt="">
        <span>Twitter</span>
      </a>
    </li>
    <li>
      <a  href="https://www.instagram.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/inst.svg" alt="">
        <span>Instagram</span>
      </a>
    </li>
    <li>
      <a  href="https://www.youtube.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/youtube.svg" alt="">
        <span>Youtube</span>
      </a>
    </li>
  </ul>
</div>

CodePudding user response：

See comments in the snippet below.

ol,
ul,
li,
menu {
  list-style: none;
}

a {
  text-decoration: none;
}

.social__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social__icon {
  display: inline-flex; /* Changed */
  align-items: center; /* Added */
  text-align: center;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: rgba(196, 196, 196, 0.5);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.social__icon img {
  vertical-align: middle;
}

.social__icon span {
  margin-left: 40px; /* Added */
}

.social__icon:active {
  background: #4B9200;
  color: #4B9200;
}

.social__icon:hover {
  animation: shake 500ms ease-in-out forwards;
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

<div >
  <ul >
    <li>
      <a  href="https://en-gb.facebook.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/fb.svg" alt="">
        <span>Facebook</span>
      </a>

    </li>
    <li>
      <a  href="https://twitter.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/twtr.svg" alt="">
        <span>Twitter</span>
      </a>
    </li>
    <li>
      <a  href="https://www.instagram.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/inst.svg" alt="">
        <span>Instagram</span>
      </a>
    </li>
    <li>
      <a  href="https://www.youtube.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/youtube.svg" alt="">
        <span>Youtube</span>
      </a>
    </li>
  </ul>
</div>

CodePudding user response：

Some style issues in the image

ol,
ul,
li,
menu {
  list-style: none;
}

a {
  text-decoration: none;
}

.social__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social__icon {
  display: inline-block;
  text-align: center;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.social__icon img {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  border-radius: 100%;
  background: rgba(196, 196, 196, 0.5);
}

.social__icon:active {
  background: #4b9200;
  color: #4b9200;
}

.social__icon:hover {
  animation: shake 500ms ease-in-out forwards;
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

<div >
  <ul >
    <li>
      <a
        
        href="https://en-gb.facebook.com"
        target="_blank"
        rel="noopener"
      >
        <img
          src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-512.png"
          alt=""
        />
        <span>Facebook</span>
      </a>
    </li>
    <li>
      <a
        
        href="https://twitter.com"
        target="_blank"
        rel="noopener"
      >
        <img
          src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png"
          alt=""
        />
        <span>Twitter</span>
      </a>
    </li>
    <li>
      <a
        
        href="https://www.instagram.com"
        target="_blank"
        rel="noopener"
      >
        <img
          src="https://cdn2.iconfinder.com/data/icons/social-media-applications/64/social_media_applications_3-instagram-512.png"
          alt=""
        />
        <span>Instagram</span>
      </a>
    </li>
    <li>
      <a
        
        href="https://www.youtube.com"
        target="_blank"
        rel="noopener"
      >
        <img
          src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/395_Youtube_logo-512.png"
          alt=""
        />
        <span>Youtube</span>
      </a>
    </li>
  </ul>
</div>