Question

我已经完成了设备尺寸，但我试图在标题中间获取标题链接，但它们浮动到左边，中心文本似乎不起作用我不能看看为什么这样我会接受任何输入并原谅我的坏代码我不熟悉这个东西......帮助。

* {
  margin: 0px;
}
div#left_container {
  float: left;
  height: 10000px;
  width: 18%;
  background-color: #FDFDFD;
}
div#main_container {
  float: left;
  height: 10000px;
  width: 64%;
}
div#right_container {
  float: left;
  height: 10000px;
  width: 18%;
  background-color: #FDFDFD;
}
div#header_bottom {
  height: 60px;
  width: auto;
  margin: 0 10px 0 10px;
  background-color: #8F7E7E;
  opacity: 0.45;
}
div#header_bottom ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div#header_bottom li a {
  display: inline;
  width: 60px;
  text-decoration: none;
  padding: 8px 16px;
}
div#header_bottom li {
  float: left;
  text-align: center;
  font-family: century gothic;
  font-size: 45px;
  text-align: -webkit-center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Mazig Grooms</title>
</head>

<body>
  <div id="left_container">

  </div>

  <div id="main_container">
    <div align="center" id="header_top">
      <img alt="logo" width="175" src="logo.png">
    </div>
    <div align="center" id="header_bottom">
      <nav>
        <ul>
          <li><a href="">Home</a>
          </li>
          <li><a href="">Times</a>
          </li>
          <li><a href="">Contact Us</a>
          </li>
        </ul>
      </nav>

    </div>

  </div>

  <div id="right_container">

  </div>

</body>

</html>

请

Answer 1

您可以关注this教程。

但我强烈建议你flex。

设置为浮动元素的父级：

ul {
   display: flex;
   display: -webkit-flex;
   justify-content: center; // or space-around
   -webkit-justify-content: center;
}

这就是全部！所有孩子都将在父母的中心。

标题没有居中

1 个答案: