Question

之前肯定有人问过，我道歉。但这些解决方案似乎并不适合我。我试图保持我的菜单文本居中，尽管分辨率更改。我也有一个＆＃39; home＆＃39;图像的东西浮动。这就是它失败的原因吗？将其插入菜单栏的最佳方法是什么？

＆＃13;

#menu-bar {
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 6px 0px 6px;
  height: 35px;
  left: 0px; 
  top: 0px; 
  background-color:rgba(0,0,0,0.7);
  z-index:998;
   position: fixed;
}

.imghome { position: relative; top: -3px; }

#menu-bar li {
  padding: 10px 25px 0px 6px;
  float: left;
  position: relative;
  list-style: none;
}
	 
#menu-bar a {
  font-weight: normal;
  font-family: verdana;
  font-style: normal;
  font-size: 12px;
  color: #D6D6D6;
  text-decoration: none;
  display: block;
  margin-left: 70px;
}

＆＃13;

   <!-- Header -->
<ul id="menu-bar">
  <li><a href="index.html"> <img class="imghome" src="assets/img/home1.png" width="20" height="20" "top="9"></li>
 <li><a href="howtoanalyse.html">How to Analyse   </a></li>
 <li><a href="write.html">How to Write   </a>
 <li><a href="grammar.html">Grammar Slides   </a>
 <li><a href="topics.html">Topics   </a></li> 
 <li><a href="authors.html">Authors   </a></li> 
 <li><a href="information.html">Useful Information   </a></li>
</ul>

＆＃13;

Link to js fiddle

Answer 1

在CSS中使用Flexbox有助于对齐文本并根据屏幕大小自动调整。

尝试添加：

display: flex;
justify-content: center;
align-items: center;

到＃main-bar 。我还会对填充进行一些调整以使其看起来更好：

＆＃13;

#menu-bar {
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 6px 0px 6px;
  height: 50px;
  left: 0px; 
  top: 0px; 
  background-color:rgba(0,0,0,0.7);
  z-index:998;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.imghome { position: relative; top: -3px; }

#menu-bar li {
  padding: 10px 15px;
  
  list-style: none;
}
	 
#menu-bar a {
  font-weight: normal;
  font-family: verdana;
  font-style: normal;
  font-size: 12px;
  color: #D6D6D6;
  text-decoration: none;
  display: block;
}

＆＃13;

   <!-- Header -->
<ul id="menu-bar">
  <li><a href="index.html"> <img class="imghome" src="assets/img/home1.png"  height="20" "top="9"></li>
 <li><a href="howtoanalyse.html">How to Analyse   </a></li>
 <li><a href="write.html">How to Write   </a>
 <li><a href="grammar.html">Grammar Slides   </a>
 <li><a href="topics.html">Topics   </a></li> 
 <li><a href="authors.html">Authors   </a></li> 
 <li><a href="information.html">Useful Information   </a></li>
</ul>

＆＃13;

有关flexboxes的更多信息：FlexBox

希望这就是你要找的东西！

Answer 2

我做的第一件事就是删除img标签中的附加引号。

正如您所提到的，希望它能够适应屏幕尺寸，我删除了背景的固定高度，以便在较小的屏幕上正确改变高度。

然后，我将其从列表中删除，以便文本可以正确居中并将其从display:block更改为display:inline-block，以便动态更改，最后我添加了text-align: center;，因此它将居中自动与屏幕尺寸无关。

请参阅JsFiddle

尽管屏幕更改，仍保持菜单中的文本居中

2 个答案: