小贝子编程

锚与svg图标和文本垂直对齐



: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>

我试图用svg-sprite中的svg图标为两个锚点进行中心垂直对齐。将项目居中显示没有帮助(不够(。内联块和垂直对齐中间的组合。

Github链接Github页面链接Figma

发行图片CodePen代码

现在，在存储库中，您可以看到显示弹性和对齐项目中心；

在Figma布局中，您有一个16像素的行高，而在网站上，您有16像素的svg图标高度和17像素的电话号码(这就是为什么您不能按照自己想要的方式对齐元素的原因(。你所要做的就是改变类的线高度：

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

}

Flexalign-items按预期工作，但不能"自动地"；调整图标大小以获得相同的视觉高度。

您可以通过调整viewBox值来规范svg大小。使用引用精灵元素的<use>实例可以更好地实现这一点。

示例1：相同视觉高度的viewBox调整

.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>

示例2:nav中的<use>元素

: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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium