Vertical alignment in anchor with svg icon and text

Max Fedorchuk 0
Viewed 61

:root {
  --main-font-family: Roboto, sans-serif;
  --main-font-size: 14px;
  --main-line-height: 1.71;
  --logo-font-family: Raleway, Roboto, sans-serif;
  --logo-font-size: 26px;
  --main-letter-spacing: 0.03em;

  --main-font-color: #757575;
  --title-font-color: #212121;
  --logo-font-color: #000000;
  --main-light-color: #ffffff;
  --contacts-font-color: rgba(255, 255, 255, 0.6);
  --accent-color: #2196f3;
  --main-dark-color: #2f303a;
  --secondary-bg-color: #f5f4fa;
  --header-border-color: #ececec;
}

/* Загальні стилі */

body.studio {
  font-family: var(--main-font-family);
  font-size: var(--main-font-size);
  line-height: var(--main-line-height);
  letter-spacing: var(--main-letter-spacing);

  color: var(--main-font-color);
  background-color: var(--main-light-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin: 0;
}

ul {
  padding-left: 0;
}

button {
  padding: 0;
  border: 0;
}

main img {
  display: block;
  width: 100%;
}

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* .container.big-container {
  max-width: 1600px;
  padding: 0;
} */

.section {
  padding-top: 94px;
  padding-bottom: 94px;
}

.title {
  color: var(--title-font-color);
}

.header .nav-link,
.header .nav-contact,
.footer .address-geo,
.footer .address-contact {
  text-decoration: none;
}

.header .nav-list,
.header .nav-contacts,
.footer .address-list,
.benefits-list,
.doing-list,
.team-list,
.works-list,
.works-filters {
  list-style: none;
}

.logo {
  font-family: var(--logo-font-family);
  font-weight: 700;
  font-size: var(--logo-font-size);
  line-height: 1.174;
  letter-spacing: var(--main-letter-spacing);
  text-decoration: none;
}

.accent {
  color: var(--accent-color);
}

.unvisible {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

/* Шапка */

.header {
  border-bottom: 1px solid var(--header-border-color);
}

.header .flex-container {
  display: flex;
  align-items: center;
}

nav.flex-container {
  column-gap: 93px;
}

.header .logo {
  color: var(--logo-font-color);
}

.header .nav-list {
  column-gap: 50px;
}

.nav-item {
  line-height: 0;
}

.header .nav-link,
.header .nav-contact {
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: 0.02em;
}

.header .nav-link {
  display: block;

  padding-top: 32px;
  padding-bottom: 31px;

  color: var(--title-font-color);
}

.header .nav-contacts {
  margin-left: auto;

  column-gap: 50px;
}

.header .nav-contact {
  color: inherit;
  display: flex;
  column-gap: 10px;
  align-items: center;
  fill: var(--main-font-color);
}

.icon-envelope {
  width: 16px;
  height: 12px;
}

.icon-smartphone {
  width: 10px;
  height: 16px;
}

.header .active-link,
.header .nav-link:hover,
.header .nav-contact:hover,
.header .nav-link:focus,
.header .nav-contact:focus {
  color: var(--accent-color);
  fill: var(--accent-color);
}
<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    <title>WebStudio</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400;500;700;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body class="studio">
    <header class="header">
      <div class="container flex-container">
        <nav class="flex-container">
          <a class="logo" href="./index.html"><span class="accent">Web</span>Studio</a>
          <ul class="nav-list flex-container">
            <li class="nav-item"><a class="nav-link active-link" href="./index.html">Студія</a></li>
            <li class="nav-item">
              <a class="nav-link" href="./portfolio.html">Портфоліо</a>
            </li>
            <li class="nav-item"><a class="nav-link" href="./index.html">Контакти</a></li>
          </ul>
        </nav>
        <ul class="nav-contacts flex-container">
          <li class="nav-item">
            <a class="nav-contact" href="mailto:info@devstudio.com">
              <svg class="contact-icon icon-envelope" viewBox="0 0 43 32" xmlns="http://www.w3.org/2000/svg">
    <path d="M38.667 0H4C1.795 0 0 1.795 0 4v24c0 2.205 1.795 4 4 4h34.667c2.205 0 4-1.795 4-4V4c0-2.205-1.795-4-4-4zm0 2.667c.181 0 .355.037.512.104L21.334 18.238 3.489 2.771c.151-.065.327-.104.512-.104h34.667zm0 26.666H4A1.333 1.333 0 0 1 2.667 28V5.587l17.792 15.421c.233.203.539.327.875.327s.642-.124.876-.328l-.002.001L40 5.587V28c0 .736-.597 1.333-1.333 1.333z"/>
</svg>
              info@devstudio.com</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-contact" href="tel:+380961111111">
              <svg class="contact-icon icon-smartphone" viewBox="0 0 20 32" xmlns="http://www.w3.org/2000/svg">
    <path d="M17 0H3C1.346 0 0 1.346 0 3v26c0 1.654 1.346 3 3 3h14c1.654 0 3-1.346 3-3V3c0-1.654-1.346-3-3-3zM3 2h14a1 1 0 0 1 1 1v21H2V3a1 1 0 0 1 1-1zm14 28H3a1 1 0 0 1-1-1v-3h16v3a1 1 0 0 1-1 1z"/><path d="M4.708 27.478a.889.889 0 0 1 .001 1.319l-.001.001a1.048 1.048 0 0 1-1.417 0l.001.001a.889.889 0 0 1-.001-1.319l.001-.001a1.048 1.048 0 0 1 1.417 0l-.001-.001z"/>
</svg>+38 096 111 11 11</a>
          </li>
        </ul>
      </div>
    </header>
  </body>
</html>

I trying to make central vertical alignment for two anchors with svg icons from svg-sprite. Display flex and align-items center for doesn't help (not enough). Combination of inline-block and vertical-align middle too.

Github Link Github Pages Link Figma

picture of issue CodePen Code

Right now in repository you can see display flex and align-items center;

vertical-alignment icons svg anchor css
2 Answers

In the Figma layout, you have a line height of 16 pixels, and on the site you have a svg icon height of 16 pixels, and a phone number of 17 pixels (that's why you can't align your element the way you want). All you have to do is just change the line height of the class:

.header .nav-link, .header .nav-contact {
font-weight: 500;
line-height: 1em;
letter-spacing: 0.02em;

}

userBzLj10

Flex align-items works as expected, but it can't "automagically" adjust icon sizes to get the same visual height.

You could normalize your svg sizes by tweaking the viewBox values. This could be achieved even better with <use> instances referencing sprite elements.

Example 1: viewBox adjustments for same visual heights

.wrap {
  font-family: Arial;
  font-size: 10vw;
  display: flex;
  align-items: center;
  gap: 0.2em;
}

svg {
  height: 1em;
}
<div class="wrap">
  <svg class="contact-icon icon-envelope" viewBox="0 0 43 45">
    <use href="#icon-envelope" />
  </svg>
  <svg class="contact-icon icon-envelope" viewBox="0 0 20 32">
    <use href="#icon-smartphone" />
  </svg> 
Baseline
</div>


<svg class="sprite" xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <symbol id="icon-envelope" class="contact-icon icon-envelope" viewBox="0 0 43 32">
    <path d="M38.667 0H4C1.795 0 0 1.795 0 4v24c0 2.205 1.795 4 4 4h34.667c2.205 0 4-1.795 4-4V4c0-2.205-1.795-4-4-4zm0 2.667c.181 0 .355.037.512.104L21.334 18.238 3.489 2.771c.151-.065.327-.104.512-.104h34.667zm0 26.666H4A1.333 1.333 0 0 1 2.667 28V5.587l17.792 15.421c.233.203.539.327.875.327s.642-.124.876-.328l-.002.001L40 5.587V28c0 .736-.597 1.333-1.333 1.333z" />
  </symbol>

  <symbol id="icon-smartphone" class="icon contact-icon icon-smartphone" viewBox="0 0 20 32" >
    <path d="M17 0H3C1.346 0 0 1.346 0 3v26c0 1.654 1.346 3 3 3h14c1.654 0 3-1.346 3-3V3c0-1.654-1.346-3-3-3zM3 2h14a1 1 0 0 1 1 1v21H2V3a1 1 0 0 1 1-1zm14 28H3a1 1 0 0 1-1-1v-3h16v3a1 1 0 0 1-1 1z" />
    <path d="M4.708 27.478a.889.889 0 0 1 .001 1.319l-.001.001a1.048 1.048 0 0 1-1.417 0l.001.001a.889.889 0 0 1-.001-1.319l.001-.001a1.048 1.048 0 0 1 1.417 0l-.001-.001z" />

  </symbol>
</svg>

Example 2: <use> elements in nav

:root {
  --main-font-family: Roboto, sans-serif;
  --main-font-size: 14px;
  --main-line-height: 1.71;
  --logo-font-family: Raleway, Roboto, sans-serif;
  --logo-font-size: 26px;
  --main-letter-spacing: 0.03em;
  --main-font-color: #757575;
  --title-font-color: #212121;
  --logo-font-color: #000000;
  --main-light-color: #ffffff;
  --contacts-font-color: rgba(255, 255, 255, 0.6);
  --accent-color: #2196f3;
  --main-dark-color: #2f303a;
  --secondary-bg-color: #f5f4fa;
  --header-border-color: #ececec;
}


/* Загальні стилі */

body.studio {
  font-family: var(--main-font-family);
  font-size: var(--main-font-size);
  line-height: var(--main-line-height);
  letter-spacing: var(--main-letter-spacing);
  color: var(--main-font-color);
  background-color: var(--main-light-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin: 0;
}

ul {
  padding-left: 0;
}

button {
  padding: 0;
  border: 0;
}

main img {
  display: block;
  width: 100%;
}

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}


/* .container.big-container {
  max-width: 1600px;
  padding: 0;
} */

.section {
  padding-top: 94px;
  padding-bottom: 94px;
}

.title {
  color: var(--title-font-color);
}

.header .nav-link,
.header .nav-contact,
.footer .address-geo,
.footer .address-contact {
  text-decoration: none;
}

.header .nav-list,
.header .nav-contacts,
.footer .address-list,
.benefits-list,
.doing-list,
.team-list,
.works-list,
.works-filters {
  list-style: none;
}

.logo {
  font-family: var(--logo-font-family);
  font-weight: 700;
  font-size: var(--logo-font-size);
  line-height: 1.174;
  letter-spacing: var(--main-letter-spacing);
  text-decoration: none;
}

.accent {
  color: var(--accent-color);
}

.unvisible {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}


/* Шапка */

.header {
  border-bottom: 1px solid var(--header-border-color);
}

.header .flex-container {
  display: flex;
  align-items: center;
}

nav.flex-container {
  column-gap: 93px;
}

.header .logo {
  color: var(--logo-font-color);
}

.header .nav-list {
  column-gap: 50px;
}

.nav-item {
  line-height: 0;
}

.header .nav-link,
.header .nav-contact {
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: 0.02em;
}

.header .nav-link {
  display: block;
  padding-top: 32px;
  padding-bottom: 31px;
  color: var(--title-font-color);
}

.header .nav-contacts {
  margin-left: auto;
  column-gap: 50px;
}

.header .nav-contact {
  color: inherit;
  display: flex;
  column-gap: 10px;
  align-items: center;
  fill: var(--main-font-color);
}

.svg-icon {
  height: 1.6em;
}

.icon-envelope {}

.icon-smartphone {}

.header .active-link,
.header .nav-link:hover,
.header .nav-contact:hover,
.header .nav-link:focus,
.header .nav-contact:focus {
  color: var(--accent-color);
  fill: var(--accent-color);
}
<head>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css" />

  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet" />

</head>

<body class="studio">
  <header class="header">
    <div class="container flex-container">
      <nav class="flex-container">
        <a class="logo" href="./index.html"><span class="accent">Web</span>Studio</a>
        <ul class="nav-list flex-container">
          <li class="nav-item"><a class="nav-link active-link" href="./index.html">Студія</a></li>
          <li class="nav-item">
            <a class="nav-link" href="./portfolio.html">Портфоліо</a>
          </li>
          <li class="nav-item"><a class="nav-link" href="./index.html">Контакти</a></li>
        </ul>
      </nav>
      <ul class="nav-contacts flex-container">
        <li class="nav-item">
          <a class="nav-contact" href="mailto:info@devstudio.com">
            <svg class="svg-icon contact-icon icon-envelope" viewBox="0 0 43 45">
              <use href="#icon-envelope" />
            </svg> info@devstudio.com
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-contact" href="tel:+380961111111">
            <svg class="svg-icon contact-icon icon-envelope" viewBox="0 0 20 32">
              <use href="#icon-smartphone" />
            </svg>+38 096 111 11 11</a>
        </li>
      </ul>
    </div>
  </header>

  <svg class="sprite" xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="display:none">
    <symbol id="icon-envelope" class="contact-icon icon-envelope" viewBox="0 0 43 32">
      <path d="M38.667 0H4C1.795 0 0 1.795 0 4v24c0 2.205 1.795 4 4 4h34.667c2.205 0 4-1.795 4-4V4c0-2.205-1.795-4-4-4zm0 2.667c.181 0 .355.037.512.104L21.334 18.238 3.489 2.771c.151-.065.327-.104.512-.104h34.667zm0 26.666H4A1.333 1.333 0 0 1 2.667 28V5.587l17.792 15.421c.233.203.539.327.875.327s.642-.124.876-.328l-.002.001L40 5.587V28c0 .736-.597 1.333-1.333 1.333z" />
    </symbol>

    <symbol id="icon-smartphone" class="icon contact-icon icon-smartphone" viewBox="0 0 20 32">
      <path d="M17 0H3C1.346 0 0 1.346 0 3v26c0 1.654 1.346 3 3 3h14c1.654 0 3-1.346 3-3V3c0-1.654-1.346-3-3-3zM3 2h14a1 1 0 0 1 1 1v21H2V3a1 1 0 0 1 1-1zm14 28H3a1 1 0 0 1-1-1v-3h16v3a1 1 0 0 1-1 1z" />
      <path d="M4.708 27.478a.889.889 0 0 1 .001 1.319l-.001.001a1.048 1.048 0 0 1-1.417 0l.001.001a.889.889 0 0 1-.001-1.319l.001-.001a1.048 1.048 0 0 1 1.417 0l-.001-.001z" />

    </symbol>
  </svg>
</body>

herrstrietzel0
Related