Блог

У меня возникли проблемы с размещением значка справа от моего текста бренда по центру без смещения текста бренда.

Прямо сейчас текст находится по центру вверху. Я хочу добавить значок справа от него.

В настоящее время это выглядит так

И я хочу, чтобы это выглядело так

Мой текущий код:

 <nav class="navbar navbar-expand-lg fixed-top justify-content-center">
    <a class="navbar-brand text-center">
        <span class="text-strong">
            Brand
        </span>
    </a>
</nav>
 

Я рассматривал возможность просто сделать 3 столбца и центрировать текст бренда в центральном столбце, поместив значок в правый столбец, но мне нечего поместить в левый столбец.

Простой способ добавить изображение, не затрагивая название бренда по центру, — это установить абсолютное положение изображения. этот способ в основном действует сам по себе и не заботится о названии бренда. но если вы это сделаете, вы должны убедиться, что правильно расположили его.

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

возможно, вам придется возиться с краем вашего изображения, когда вы его туда добавляете. но это должно сработать. кроме того, я только добавил границу, чтобы показать, где они были.

 .container {
display:flex;
justify-content: center;
padding-top: 1vw;
padding-bottom: 1vw;
}

.brand {
display:flex;
border: 2px solid;
margin: auto;
text-align:center;
}

.brandLogo {
border: 2px solid;
display:flex;
position:absolute;
right:1vw;


} 

 <nav class="navbar navbar-expand-lg">
    
        
        <div class="container">
        
            <div class="brand">
               <h1>Brand</h1>
            </div>
            
            <div class="brandLogo">
              <img src="#" alt="brandLogo">
            </div>
        </div>
    
</nav> 

Вы также можете использовать шаблоны сетки, которые, на мой взгляд, выглядят намного чище и проще в использовании.

 .container {
    font-size: 18px;
    min-height: 100%;
    width: 100%;
    display: grid;
    text-align: center;
    grid-template-columns: .5fr 2.5fr .5fr;
    grid-template-rows: 1fr;
    grid-gap: 10px;
    grid-template-areas:
      "...... brand logo";
 }

.brand {
grid-area: brand;
border: 2px solid;
padding: .5rem;
font-size: 3rem;
}

.brandLogo {
grid-area: logo;
border: 2px solid;
} 

 <nav class="navbar navbar-expand-lg">
    
        
        <div class="container">
        
            <div class="brand">
               Brand
            </div>
            
            <div class="brandLogo">
              <img src="#" alt="brandLogo">
            </div>
        </div>
    
</nav> 

вы можете добавить пустой элемент flex перед flex box!

 <nav class="navbar navbar-expand-lg fixed-top justify-content-center">
    <a class="navbar-brand text-center">
        <span class="text-strong">
            Brand
        </span>
    </a>
    <div class="icon">
        <img src='icon.svg' />
    </div>
</nav>
 

в вашем css поместите эти стили:

 //flex container

.navbar{ 
    display: flex;
    justify-content: space-between;
}

//flex items

.navbar:before {
    content:'';
    flex-basis: 33.3333%;
}
.navbar-brand, .icon {
    flex-basis: 33.3333%;
    display: flex;
}
.navbar-brand {
    justify-content: center;
}
.icon {
    justify-content: flex-end;
}