Question

我不能让它水平对齐，我尝试过使用一些标签和东西，但它不会工作。

HTML / CSS

＆＃13;

#nav {
  line-height: 30px;
  background-color: #eeeeee;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

＆＃13;

<div id="nav">
  <a href="istHome.html">
    <img src="http://www.placehold.it/50" height="50">
  </a>
  <a href="Operations.html">
    <img src="http://www.placehold.it/50" height="50">
  </a>
  <a href="System.html">
    <img src="http://www.placehold.it/50" height="50">
  </a>
  <a href="EndUser.html">
    <img src="http://www.placehold.it/50" height="50">
  </a>
  <a href="AboutMe.html">
    <img src="http://www.placehold.it/50" height="50">
  </a>
</div>

＆＃13;

Answer 1

你必须在你身上制作text-align:center。

Answer 2

你需要像这样使用伪元素position:relative：

＆＃13;

::after

＆＃13;

#nav {
    line-height:30px;
    background-color:#eeeeee;
    width: 50%;
    margin-left: auto; 
    margin-right: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

#nav::after
{
    display: inline-block;
    width: 100%;
    content: '';
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

＆＃13;

Answer 3

css下面会为你做

#nav {
  background-color: #eeeeee;
  width: 60%;
  margin: auto;
  padding: 10px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;    
}

使用div标签水平对齐图片，使它们展开

3 个答案: