3

В меню есть несколько svg. Проблема в том, что текст рядом с ними почему-то отображается немного ниже, хотя у общего для них дива задан display: flex, align-items: flex-start. Это не критично, конечно. Но хотелось бы знать, в чем может быть причина. Посмотреть можно здесь: https://codepen.io/Enena/pen/BajPmdG.

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="call" viewBox="0 0 512.006 512.006"><title>call</title><path d="M502.05,407.127l-56.761-37.844L394.83,335.65c-9.738-6.479-22.825-4.355-30.014,4.873l-31.223,40.139 c-6.707,8.71-18.772,11.213-28.39,5.888c-21.186-11.785-46.239-22.881-101.517-78.23c-55.278-55.349-66.445-80.331-78.23-101.517 c-5.325-9.618-2.822-21.683,5.888-28.389l40.139-31.223c9.227-7.188,11.352-20.275,4.873-30.014l-32.6-48.905L104.879,9.956 C98.262,0.03,85.016-2.95,74.786,3.185L29.95,30.083C17.833,37.222,8.926,48.75,5.074,62.277 C-7.187,106.98-9.659,205.593,148.381,363.633s256.644,155.56,301.347,143.298c13.527-3.851,25.055-12.758,32.194-24.876 l26.898-44.835C514.956,426.989,511.976,413.744,502.05,407.127z"/><path d="M291.309,79.447c82.842,0.092,149.977,67.226,150.069,150.069c0,4.875,3.952,8.828,8.828,8.828 c4.875,0,8.828-3.952,8.828-8.828c-0.102-92.589-75.135-167.622-167.724-167.724c-4.875,0-8.828,3.952-8.828,8.828 C282.481,75.494,286.433,79.447,291.309,79.447z"/><path d="M291.309,132.412c53.603,0.063,97.04,43.501,97.103,97.103c0,4.875,3.952,8.828,8.828,8.828 c4.875,0,8.828-3.952,8.828-8.828c-0.073-63.349-51.409-114.686-114.759-114.759c-4.875,0-8.828,3.952-8.828,8.828 C282.481,128.46,286.433,132.412,291.309,132.412z"/><path d="M291.309,185.378c24.365,0.029,44.109,19.773,44.138,44.138c0,4.875,3.952,8.828,8.828,8.828 c4.875,0,8.828-3.952,8.828-8.828c-0.039-34.111-27.682-61.754-61.793-61.793c-4.875,0-8.828,3.952-8.828,8.828 C282.481,181.426,286.433,185.378,291.309,185.378z"/></symbol><symbol id="pin" viewBox="0 0 512 512"><title>pin</title><path d="m407.579 87.677c-31.073-53.624-86.265-86.385-147.64-87.637-2.62-.054-5.257-.054-7.878 0-61.374 1.252-116.566 34.013-147.64 87.637-31.762 54.812-32.631 120.652-2.325 176.123l126.963 232.387c.057.103.114.206.173.308 5.586 9.709 15.593 15.505 26.77 15.505 11.176 0 21.183-5.797 26.768-15.505.059-.102.116-.205.173-.308l126.963-232.387c30.304-55.471 29.435-121.311-2.327-176.123zm-151.579 144.323c-39.701 0-72-32.299-72-72s32.299-72 72-72 72 32.299 72 72-32.298 72-72 72z"/></symbol></svg>

<section class="menu u-padding-main" id="menu">
    <div class="menu__logo">
        <img src="/assets/img/logo.png" alt="Logo" class="menu__logo-img">
        <div class="menu__logo-text">
            <h2>&#171;ЭкспертПро&#187;</h2>
            <h6>судебно-экспертная служба</h6>
        </div>
    </div>
    <div class="menu__location">
        <svg class="icon" viewBox="0 0 20 20" width="100%" height="100%" preserveAspectRatio="none">
            <use xlink:href="#pin"/>
        </svg>
        <h4>Северо-Кавказский и Южный Федеральный округ</h4>
    </div>
    <div class="menu__phone">
        <svg class="icon" viewBox="0 0 20 20">
            <use xlink:href="#call" />
        </svg>
        <h4>8 (962) <span>454-50-10</span> <br>
            8 (918) <span>867-09-83</span>
        </h4>
    </div>
    <a href="#" class="btn btn--dark">Заказать звонок</a>
</section>
3
  • А как должно быть? Если вам нужно расположить иконку в центре, то и задайте align-items: center Да, и позиционируете вы не относительно текста, а относительно общего предка
    – Aleksandr
    13 июл 2020 в 11:44
  • Иконка не должна быть в центре. Она должна быть на одном уровне с текстом. А получается, что выше текста на пару пикселей. И как спозиционировать относительно текста тогда? Есть, конечно, вариант, задать svg margin-top.
    – Elena
    13 июл 2020 в 12:04
  • 1
    Иконка не выше текста, а на одном уровне, просто текст имеет некоторые отступы )), я бы так и сделал - svg margin-top
    – Aleksandr
    13 июл 2020 в 12:17

1 ответ 1

2

Выровнять иконку относительно текста можно несколькими способами. Чтобы сильно не вмешиваться в авторскую вёрстку, воспользовался возможностями позиционирования SVG.

  1. Заменил preserveAspectRatio="none> так как при такой записи SVG масштабируется без сохранения пропорций, то есть растягивается на весь родительский контейнер.

На запись по умолчанию - preserveAspectRatio="xMidYMid meet"> сохраняет пропорции и позволяет подвинуть изображение дополнительными командами SVG. В решении использовано y="-1"

<use xlink:href="#pin" y="-1"/>
  1. Добавил в стили высоту родительского контейнера иконок SVG
.menu__location svg {
  width: 3rem;
  height:3rem;
}
.menu__phone svg {
 width: 2rem;
 height:2rem;
}

Ниже полный код:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  font-size: 1.8rem;
  font-family: "PT Sans Caption", sans-serif;
  font-weight: 400;
  min-width: 860px;
  overflow-x: hidden;
}

.menu {
  background: #000000;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 2rem;
  font-size: 1.5rem;
}
.menu__logo {
  display: flex;
  margin-right: auto;
}
.menu__logo-img {
  margin-right: 1rem;
}
.menu__logo-text {
  text-align: center;
  font-family: "Roboto Slab", serif;
  font-weight: 300;
  letter-spacing: 1px;
}
.menu__logo-text h6 {
  color: #bf9037;
  font-style: italic;
}
.menu__location, .menu__phone {
  display: flex;
  align-items: flex-start;
  flex: 0 0 25%;
  max-width: 25%;
}
.menu__location svg, .menu__phone svg {
  fill: #7d7d7d;
 
  margin-right: 1rem;
}
.menu__location {
  margin-right: 0.5rem;
}
.menu__location svg {
  width: 3rem;
  height:3rem;
}
.menu__phone svg {
 width: 2rem;
 height:2rem;
}
.menu__phone span {
  color: #bf9037;
}

.btn {
  padding: 1.5rem 2.5rem;
  border-radius: 4rem;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.2s;
}
.btn--dark:link, .btn--dark:visited {
  background: #000;
  color: #fff;
  border: 1px solid #bf9037;
}
.btn--dark:link:hover, .btn--dark:link:active, .btn--dark:visited:hover, .btn--dark:visited:active {
  background: #1a1a1a;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="call" viewBox="0 -48 512.006 512.006"<style="border:1px solid red;"><title>call</title><path d="M502.05,407.127l-56.761-37.844L394.83,335.65c-9.738-6.479-22.825-4.355-30.014,4.873l-31.223,40.139 c-6.707,8.71-18.772,11.213-28.39,5.888c-21.186-11.785-46.239-22.881-101.517-78.23c-55.278-55.349-66.445-80.331-78.23-101.517 c-5.325-9.618-2.822-21.683,5.888-28.389l40.139-31.223c9.227-7.188,11.352-20.275,4.873-30.014l-32.6-48.905L104.879,9.956 C98.262,0.03,85.016-2.95,74.786,3.185L29.95,30.083C17.833,37.222,8.926,48.75,5.074,62.277 C-7.187,106.98-9.659,205.593,148.381,363.633s256.644,155.56,301.347,143.298c13.527-3.851,25.055-12.758,32.194-24.876 l26.898-44.835C514.956,426.989,511.976,413.744,502.05,407.127z"/><path d="M291.309,79.447c82.842,0.092,149.977,67.226,150.069,150.069c0,4.875,3.952,8.828,8.828,8.828 c4.875,0,8.828-3.952,8.828-8.828c-0.102-92.589-75.135-167.622-167.724-167.724c-4.875,0-8.828,3.952-8.828,8.828 C282.481,75.494,286.433,79.447,291.309,79.447z"/><path d="M291.309,132.412c53.603,0.063,97.04,43.501,97.103,97.103c0,4.875,3.952,8.828,8.828,8.828 c4.875,0,8.828-3.952,8.828-8.828c-0.073-63.349-51.409-114.686-114.759-114.759c-4.875,0-8.828,3.952-8.828,8.828 C282.481,128.46,286.433,132.412,291.309,132.412z"/><path d="M291.309,185.378c24.365,0.029,44.109,19.773,44.138,44.138c0,4.875,3.952,8.828,8.828,8.828 c4.875,0,8.828-3.952,8.828-8.828c-0.039-34.111-27.682-61.754-61.793-61.793c-4.875,0-8.828,3.952-8.828,8.828 C282.481,181.426,286.433,185.378,291.309,185.378z"/></symbol><symbol id="pin" viewBox="0 0 512 512"><title>pin</title><path d="m407.579 87.677c-31.073-53.624-86.265-86.385-147.64-87.637-2.62-.054-5.257-.054-7.878 0-61.374 1.252-116.566 34.013-147.64 87.637-31.762 54.812-32.631 120.652-2.325 176.123l126.963 232.387c.057.103.114.206.173.308 5.586 9.709 15.593 15.505 26.77 15.505 11.176 0 21.183-5.797 26.768-15.505.059-.102.116-.205.173-.308l126.963-232.387c30.304-55.471 29.435-121.311-2.327-176.123zm-151.579 144.323c-39.701 0-72-32.299-72-72s32.299-72 72-72 72 32.299 72 72-32.298 72-72 72z"/></symbol></svg>

    <section class="menu u-padding-main" id="menu">
        <div class="menu__logo">
            <img src="/assets/img/logo.png" alt="Logo" class="menu__logo-img">
            <div class="menu__logo-text">
                <h2>&#171;ЭкспертПро&#187;</h2>
                <h6>судебно-экспертная служба</h6>
            </div>
        </div>
        <div class="menu__location">
            <svg class="icon"   viewBox="0 0 20 20" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
                <use xlink:href="#pin" y="-1"/>
            </svg>
            <h4>Северо-Кавказский и Южный Федеральный округ</h4>
        </div>
        <div class="menu__phone">
            <svg class="icon" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet">
                <use xlink:href="#call" y="1" />
            </svg>
            <h4>8 (962) <span>454-50-10</span> <br>
                8 (918) <span>867-09-83</span>
            </h4>
        </div>
        <a href="#" class="btn btn--dark">Заказать звонок</a>
    </section>

Note

Сниппет ломает вёрстку, смотрите в полноэранном режиме или локальный файл в браузере

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.