Home > front end >  Vertical alignment in anchor with svg icon and text
Vertical alignment in anchor with svg icon and text

Time：09-10

: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 >
    <header >
      <div >
        <nav >
          <a  href="./index.html"><span >Web</span>Studio</a>
          <ul >
            <li ><a  href="./index.html">Студія</a></li>
            <li >
              <a  href="./portfolio.html">Портфоліо</a>
            </li>
            <li ><a  href="./index.html">Контакти</a></li>
          </ul>
        </nav>
        <ul >
          <li >
            <a  href="mailto:[email protected]">
              <svg  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>
              [email protected]</a
            >
          </li>
          <li >
            <a  href="tel: 380961111111">
              <svg  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;

CodePudding user response：

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;

}

CodePudding user response：

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 >
  <svg  viewBox="0 0 43 45">
    <use href="#icon-envelope" />
  </svg>
  <svg  viewBox="0 0 20 32">
    <use href="#icon-smartphone" />
  </svg> 
Baseline
</div>


<svg  xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <symbol id="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"  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 >
  <header >
    <div >
      <nav >
        <a  href="./index.html"><span >Web</span>Studio</a>
        <ul >
          <li ><a  href="./index.html">Студія</a></li>
          <li >
            <a  href="./portfolio.html">Портфоліо</a>
          </li>
          <li ><a  href="./index.html">Контакти</a></li>
        </ul>
      </nav>
      <ul >
        <li >
          <a  href="mailto:[email protected]">
            <svg  viewBox="0 0 43 45">
              <use href="#icon-envelope" />
            </svg> [email protected]
          </a>
        </li>
        <li >
          <a  href="tel: 380961111111">
            <svg  viewBox="0 0 20 32">
              <use href="#icon-smartphone" />
            </svg> 38 096 111 11 11</a>
        </li>
      </ul>
    </div>
  </header>

  <svg  xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="display:none">
    <symbol id="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"  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>

Page link：https//www.codepudding.com/frontend/539909.html

Prev:convert some of the response values in curl command
Next:How do i subract a number a specific amount of times?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding