Выравнивание текста по обеим сторонам изображения в навигационной панели (html и css) - PullRequest
Новая
       20

Выравнивание текста по обеим сторонам изображения в навигационной панели (html и css)

0 голосов
/ 10 сентября 2018

Я хочу иметь изображение в средней навигационной панели, которое я сделал, но текст справа отодвигается далеко! как мне это исправить?

Вот так выглядит мой Навбар в HTML:

Спасибо!

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Это можно легко сделать с помощью flexbox, просто замените "#logo" изображением в следующем коде ниже.

HTML: 

<nav>
    <a href="">Home</a>
    <a href="">Artwork</a>
    <div id="logo"></div>
    <a href="">Responses</a>
    <a href="">Contact</a>
</nav>

CSS: 

html, body{
  height: 100%;
}

body{
  margin: 0;
}

nav{
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}

a{
  text-decoration: none;
  color: rgba(0,0,0,0.8);
  margin: 0 40px;
}

#logo{
  width: 200px;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

Результат: https://jsfiddle.net/3L7b94fr/

0 голосов
/ 10 сентября 2018

То, что вы просите, может быть легко достигнуто с помощью flexbox.

У меня нет доступа к вашему CSS, поэтому я добавил немного сам, чтобы продемонстрировать основной принцип в этом коде: https://codepen.io/Ardiaz/pen/zJRKmR

Ключевые примечания приведены ниже: 

display: flex;

Это объявит ваш элемент как элемент flex, что позволяет использовать набор объявлений css, доступных в flex. 

justify-content: space-between;

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

...