Как сделать так, чтобы логотип был по центру, но количество букв по краям логотипа разное (из-за этого логотип немного не по центру)

Question

// css - код
.logo-icon {
    background-image: url('../images/logo_03.png');
    display: inline-block;
    width: 53px;
    height: 61px;
}

//html-код
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="logo d-flex justify-content-center align-items-center">
                <span class="logo-text">Web</span>
                <a href="#" class="logo">
                    <span class="logo-icon"></span>
                </a>
                <span class="logo-text">Coder</span>
             </div>
         </div>  
         <div class="test d-flex justify-content-center">
             <span class="logo-text__test">Test Task</span>
         </div>                  
   </div>

Answer 1

.container {
  --size: 4rem;
  position: relative;
  font-family: monospace;
  font-size: var(--size);
  line-height: 1;
}

.logo-icon {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/240px-CSS3_logo.svg.png);
  background-size: cover;
  height: var(--size);
  width: var(--size);
  margin-inline: auto;
}

.logo-text {
  position: absolute;
  top: 0;
  margin-inline: calc(var(--size) / 2);
}

.left {
  right: 50%;
}

.right {
   left: 50%;
}

<div class="container">
  <div class="logo-text left">Web</div>
  <div class="logo-icon"></div>
  <div class="logo-text right">Coder</div>
</div>

БЛОГ НА HUSL

Как сделать так, чтобы логотип был по центру, но количество букв по краям логотипа разное (из-за этого логотип немного не по центру)

Ответы (1 шт):