Как ВЕРТИКАЛЬНО центрировать логотип по левому краю и навигацию по правому краю заголовка? - PullRequest
Новая
       52

Как ВЕРТИКАЛЬНО центрировать логотип по левому краю и навигацию по правому краю заголовка?

0 голосов
/ 20 ноября 2018

Я пытался решить эту проблему.Чему я хочу научиться, так это узнать, как по-разному центрировать элементы навигации, используя семантический HTML.Я хочу, чтобы мой логотип находился слева, а навигация - справа.

Я пытался использовать float на элементе навигации, но логотип сломался и не будет располагаться по центру.Я использовал clearfix для этого, но я все еще не могу найти способы вертикально центрировать логотип и навигацию.

Не могли бы вы мне помочь?И объясни свой ответ, пожалуйста?Тогда, если возможно, не могли бы вы показать мне другие способы вертикального центрирования логотипа (слева) и навигации (справа), используя точный формат моего HTML?

Вот мой код: https://codepen.io/yortz/pen/pQdKWd

HTML 

  <!-- HEADER -->
  <header>
    <!-- LOGO -->
    <a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
    <nav>
      <ul class="clearfix">
        <li><a href="#">About</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Get in Touch</a></li>  
      </ul>
    </nav>
  </header>

CSS 

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
  background-color: #ccc;
}
nav {
  background-color: aqua;
}

/* CENTERING NAVIGATION */
header {
  width: 100%;
}
#site-logo,
  nav {
  display: inline-block;
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}

/* CLEAR FLOATS */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Пожалуйста, помогите.Спасибо!

Ответы [ 6 ]

0 голосов
/ 20 ноября 2018

Много ответов уже. Это мое. Я помещаю логотип внутри <ul> как элемент li. Я делаю контейнер <ul> a flex и самое важное: margin:auto справа для первого элемента списка. 

nav ul li:first-child {
 margin:0 auto 0 0
}


* {
  box-sizing: border-box;
}




/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav ul {
	background-color: aqua;
  display:flex; 
}
nav ul li a{height:47px;}


/* CENTERING NAVIGATION */
header {
	width: 100%;
}
#site-logo,
nav {
  
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li:first-child {
 margin:0 auto 0 0
}
nav ul li a {
  border: 1px solid red;
  padding: 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}
nav ul li:first-child a{padding:10px} 



/* CLEAR FLOATS */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        
        <nav>
          <ul class="clearfix">
            <li><a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Get in Touch</a></li>  
          </ul>
        </nav>
      </header>
0 голосов
/ 20 ноября 2018

Вам нужно изменить свой код следующим образом: 

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav {
    background-color: aqua;
}
/* CENTERING NAVIGATION */
header {
    width: 100%;
      display: table;
    vertical-align: middle;
}
.logo-wrapper{
  display: table-cell;
    vertical-align: middle;
}
#site-logo{
  display: inline-block;
  vertical-align: middle;
}
nav{
  display: table-cell;
    float: right;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}
/* CLEAR FLOATS */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

И затем отредактировать HTML-тег привязки следующим образом: 

<a href="#" class="logo-wrapper"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
0 голосов
/ 20 ноября 2018

надеюсь, это поможет.У меня было несколько изменений в вашей ссылке на jfiddle, и я вставил ее сюда.просто изменения css. 

    * {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
 width:100%;
  display:block;
}
nav {
}




/* CENTERING NAVIGATION */
header {
    width: 100%;
}
#site-logo{
  display:inline-block;
  vertical-align:middle;
    width:calc(20% - 2px);
}
nav {
  display: inline-block;
  vertical-align: middle;
  position:relative;
  width:calc(80% - 2px);

}
nav ul {
  list-style-type: none;
  padding-left: 0;
  display:inline-block;
  position:relative;
  left:76%;
  background-color: aqua;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}
/* CLEAR FLOATS */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
0 голосов
/ 20 ноября 2018

Я бы использовал flexbox для позиционирования в nav 

header {
   display: flex;
   justify-content: space-between; // pushes the logo to the left and the nav to the right
   align-items: center; // center aligns children of nav vertically
}

Если вы хотите добиться чего-то похожего без использования flexbox, вы можете расположить логотип абсолютно: 

header {
  position: relative; // with this all children can be positioned absolutely, relative to the header
  text-align: right; // this aligns the nav to the right of the header
}

header > a {
  position: absolute; // positions the logo absolute, relative to header
  top: 50%; // aligns the logo in the middle of the relative parent
  left: 0; // aligns the logo to the left edge of the relative parent
  transform: translateY(-50%); // changes the coordinates of the logo, to center it vertically (y-axis)
}

nav {
  text-align: left; // just used to reset the text-alignment in the nav elements
}

Iрассмотрит использование класса вместо выбора a-тега, например <a class="logo" href="...">...</a> и затем header .logo {...} в CSS вместо header > a {}.Это больше в будущем, если вы добавите больше элементов в заголовок.

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

0 голосов
/ 20 ноября 2018

Если вы хотите центрировать элементы по вертикали, вы можете использовать align-content с display: flex.

0 голосов
/ 20 ноября 2018

Использование float left и right и присвоение padding логотипу для вертикального выравнивания по центру 

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
.logo{
  float:left;
}
.logo img{
  padding:24px 10px;
}
nav {
	background-color: aqua;
  float:right;
}

.clearfix{
  clear:both;
}

/* CENTERING NAVIGATION */
header {
	width: 100%;
}
#site-logo,
nav {
  display: inline-block;
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}




/* CLEAR FLOATS */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        <a href="#" class="logo"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
        <nav>
          <ul class="clearfix">
            <li><a href="#">About</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Get in Touch</a></li>  
          </ul>
        </nav>
        <div class="clearfix"></div>
      </header>
...