css - 在导航栏菜单中间居中大 Logoh1

Question

我想得到这个但不可能。

我有一个带有示例的代码笔:

enter link description here

.logoh1 {
  text-indent:-99999px;
  width: 338px;
  height: 340px;
  background:   url('http://www.elcollage.com/isra/etxepare/prueba-logo.jpg');
  display: block;
  position: absolute;
  top: 18%;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  opacity: .1;
}


body {
background: #fff;
font-family: arial;
}


header {
width: 960px;
margin: 0 auto;
text-align: center;
position: relative;
}

nav li{
display: inline-block;
padding: 40px 30px 40px 0;
}

nav li:nth-child(2) {
padding-right: 100px;
}

nav li:nth-child(3) {
padding-left: 120px;
}

<section>
 <header>
  <nav>
   <ul>
      <li>CLASES de ACORDEÓN</li>
      <li>PROFESORADO</li>
      <li>ACORDEONES</li>
      <li>CONTACTO</li>
   </ul>
  </nav>
  <div class="logoh1"></div>
 </header>
</section>

及其他:

enter link description here

.logoh1 {
  text-indent:-99999px;
  width: 338px;
  height: 340px;
  background:   url('http://www.elcollage.com/isra/etxepare/prueba-logo.jpg');
  display: block;
  position: absolute;
  top: 18%;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  opacity: .1;
}


body {
background: #fff;
font-family: arial;
}


header {
width: 960px;
margin: 0 auto;
text-align: center;
position: relative;
}

nav li{
display: inline-block;
padding: 40px 30px 40px 0;
}

.left {
  float: left;
  text-align: left;
}

.right {
  float: right;
  text-align: right;
}

<section>
 <header>
  <nav>
   <ul class="left">
      <li>CLASES de ACORDEÓN</li>
      <li>PROFESORADO</li>
   </ul>
    
   <ul class="right">
      <li>ACORDEONES</li>
      <li>CONTACTO</li>
   </ul>
  </nav>
  <div class="logoh1"></div>
 </header>
</section>

这两个选项适用于小 Logo ，但不适用于更大的 Logo 。

谁能帮帮我。

谢谢。

Answer 1

我明白了。

我不记得标题宽度对于大 Logo 来说太小了。我将大小更改为 1170px，然后向左浮动并向右类添加一个 padding-left。

知道如何工作。

enter link description here

.logoh1 {
  text-indent:-99999px;
  width: 338px;
  height: 340px;
  background:   url('http://www.elcollage.com/isra/etxepare/prueba-logo.jpg');
  display: block;
  position: absolute;
  top: 18%;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  opacity: .1;
}


body {
background: #fff;
font-family: arial;
}


header {
width: 1170px;
margin: 0 auto;
text-align: center;
position: relative;
}

nav li{
display: inline-block;
padding: 40px 30px 40px 0;
}

.left {
  float: left;
  text-align: left;
}

.right {
  float: left;
  padding-left: 380px;
}

<section>
 <header>
  <nav>
   <ul class="left">
      <li>CLASES de ACORDEÓN</li>
      <li>PROFESORADO</li>
   </ul>
    
   <ul class="right">
      <li>ACORDEONES</li>
      <li>CONTACTO</li>
   </ul>
  </nav>
  <div class="logoh1"></div>
 </header>
</section>

谢谢。