Question

它将是一个导航栏，页面顶部，已修复。与此相关的部分HTML代码：

<nav>
                <div id="chameleon"><a href="#"><img src="img/chameleon.png"></a></div>
                <div id="menulogo">
                    <center><img src="img/champic_text.png" size="80%"; align="middle"></center>
                </div>
                <div id="menustripes" onclick="showmenu()"><a href="#"><img src="img/menu.png"></a></div>
</nav>

所以我想左对齐变色龙div，将menulogo div对齐并对齐menustripes div。我已经尝试了很多解决方案，但是我无法以数学方式对齐menulogo div：（

感谢您的帮助！

Answer 1

将#menulogo div移动到导航中的最后一个div，向左移动#chameleon，向右移动#menustripes，并将导航的文本对齐设置为中心：

＆＃13;

nav {
  text-align: center;
}
#menustripes {
  float: right;
}
#chameleon {
  float: left;
}

＆＃13;

<nav>
  <div id="chameleon">
    <a href="#">
      <img src="img/chameleon.png"></a>
  </div>
  <div id="menustripes" onclick="showmenu()">
    <a href="#">
      <img src="img/menu.png"></a>
  </div>
  <div id="menulogo">
    <img src="img/champic_text.png" size="80%" ; align="middle">
  </div>
</nav>

＆＃13;

或者将元素保留在现有顺序中并使用flexbox：

＆＃13;

nav {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<nav>
  <div id="chameleon">
    <a href="#">
      <img src="img/chameleon.png">
    </a>
  </div>
  <div id="menulogo">
    <img src="img/champic_text.png" size="80%" ; align="middle">
  </div>
  <div id="menustripes" onclick="showmenu()">
    <a href="#">
      <img src="img/menu.png">
    </a>
  </div>
</nav>

＆＃13;

Answer 2

以下是另外两种方法（适用于旧浏览器），但我建议使用 j08691 ＆＃39; flex版本

使用display: table

＆＃13;

nav {
  display: table;
  width: 100%;
}
nav > * {
  display: table-cell;
  width: 33.33%;
  text-align: center;
}
nav > *:nth-child(1) {
  text-align: left;
}
nav > *:nth-child(3) {
  text-align: right;
}

＆＃13;

<nav>
  <div id="chameleon">
    <a href="#">
      <img src="img/chameleon.png"></a>
  </div>
  <div id="menustripes" onclick="showmenu()">
    <a href="#">
      <img src="img/menu.png"></a>
  </div>
  <div id="menulogo">
    <img src="img/champic_text.png" size="80%" align="middle">
  </div>
</nav>

＆＃13;

使用display: inline-block

＆＃13;

nav > * {
  display: inline-block;
  width: 33%;
  text-align: center;
}
nav > *:nth-child(1) {
  text-align: left;
}
nav > *:nth-child(3) {
  text-align: right;
}

＆＃13;

<nav>
  <div id="chameleon">
    <a href="#">
      <img src="img/chameleon.png"></a>
  </div><!--
  --><div id="menustripes" onclick="showmenu()">
    <a href="#">
      <img src="img/menu.png"></a>
  </div><!--
  --><div id="menulogo">
    <img src="img/champic_text.png" size="80%" ; align="middle">
  </div>
</nav>

＆＃13;

Answer 3

添加以下课程可能会有所帮助

.grid {
display: inline-block;
width: 30%;     <-- Change accordingly
margin: 0;
padding: 3.33%;
vertical-align: top;
}

修改

You can make three different class/id for all three divs

如何并排排列3个div，1个为左，1个为中心，1个为右？

3 个答案: