中心大Logoh1在导航栏菜单中间

Question

我试图解决这个问题，但这是不可能的。

我的代码笔与示例：

enter link description here

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

和其他：

enter link description here

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这两个选项适用于小徽标，但没有更大的。

每个人都可以帮助我。

感谢。

Answer 1

我明白了。

我不记得标题宽度对于大徽标来说太小了。我将大小更改为1170px并向左浮动并向右侧添加填充左侧。

知道工作吧。

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>

感谢。