Question

我正在尝试执行以下操作：

在div中垂直和水平居中列表。
将列表项垂直居中。一个项目是图像，其他项目是文本。

我看了很多解决方案，但只能设法让列表水平居中。我无法将列表垂直居中。我无法将列表项垂直居中。

我怎样才能做到这一点？

$(function() {
  $('ul.nav a').bind('click', function(event) {
    event.preventDefault();
    var $anchor = $(this);


    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500);

    event.preventDefault();
  });
});

* {
  margin: 0;
  padding: 0;
}
body {
  letter-spacing: -1px;
}
.section {
  margin: 0px;
  height: 100vh;
  width: 100vw;
  background: url(../images/white.png) no-repeat center center fixed;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.img-circle {
  border-radius: 50%;
  height: 100px;
  width: 100px;
}
.navbar {
  height: 160px;
  width: 100%;
  position: absolute;
  top: 0px;
  background: #fff;
  color: #000000;
  font-family: 'Lato', sans-serif;
}
.navbar:hover {
  background-color: #787878;
}
.contents {
  top: 160px;
  width: 100%;
  position: absolute;
  font-family: 'Open Sans', sans-serif;
  font-size: 16pt;
  font-style: none;
  letter-spacing: -1px;
}
.section h2 {
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  text-align: center;
}
.section p {
  width: 600px;
}
.navbar ul {
  list-style: none;
}
.navbar ul li {
  float: left;
  padding: 15px;
  color: #000;
  font-size: 14px;
  font-weight: bold;
}
.navbar ul li a {
  color: #000;
  text-decoration: none;
}
.navbar ul li a:hover {
  text-decoration: none;
  color: #000;
}
span.reference {
  position: fixed;
  left: 10px;
  bottom: 10px;
  font-size: 13px;
  font-weight: bold;
}
span.reference a {
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  padding-right: 20px;
}
span.reference a:hover {
  color: #ddd;
  text-decoration: none;
}
.table {
  display: table;
  /* Allow the centering to work */
  margin: 0 auto;
}

<body>
  <div class="section" id="sectionAbout">
    <div class="navbar">
      <div class="table">
        <ul class="nav">
          <li>ABOUT</li>
          <li><a href="#sectionServices">SERVICES</a>
          </li>
          <li>
            <a href="#sectionGWA">
              <img src="images/yellow.png" class="img-circle">
            </a>
          </li>
          <li><a href="#">BLOG</a>
          </li>
          <li><a href="#sectionContact">CONTACT</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="contents">
      <h2>ABOUT US</h2>
      <div class="table">
        <p>
          <bold>this</bold>is some text
          <br>
          <br>this is some more text.
        </p>
      </div>
    </div>
  </div>
  <!-- The JavaScript -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="css/jquery.easing.1.3.js"></script>
</body>

Answer 1

从findAllByOrderByIdDesc规则中删除float: left，然后应用以下CSS。

这适用于.navbar ul li属性，该属性仅适用于vertical-align和inline元素。因此，我们必须将所有列表项设置为inline-block和display: inline-block，以便将它们置于列表中。

然后，为了使导航居中，我们将CSS伪元素应用于容器并将其设置为vertical-align:center，height: 100%和display:inline-block

请参阅下面的演示以预览此效果。

vertical-align: center

div.navbar div.table::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
ul.nav {
  font-size: 0;
}
ul.nav li {
  display: inline-block;
  vertical-align: middle;
}

$(function() {
  $('ul.nav a').bind('click', function(event) {
    event.preventDefault();
    var $anchor = $(this);


    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500);

    event.preventDefault();
  });
});

div.navbar div.table::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
ul.nav {
  font-size: 0;
}
ul.nav li {
  display: inline-block;
  vertical-align: middle;
}
* {
  margin: 0;
  padding: 0;
}
body {
  letter-spacing: -1px;
}
.section {
  margin: 0px;
  height: 100vh;
  width: 100vw;
  background: url(../images/white.png) no-repeat center center fixed;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.img-circle {
  border-radius: 50%;
  height: 100px;
  width: 100px;
}
.navbar {
  height: 160px;
  width: 100%;
  position: absolute;
  top: 0px;
  background: #fff;
  color: #000000;
  font-family: 'Lato', sans-serif;
}
.navbar:hover {
  background-color: #787878;
}
.contents {
  top: 160px;
  width: 100%;
  position: absolute;
  font-family: 'Open Sans', sans-serif;
  font-size: 16pt;
  font-style: none;
  letter-spacing: -1px;
}
.section h2 {
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  text-align: center;
}
.section p {
  width: 600px;
}
.navbar ul {
  list-style: none;
}
.navbar ul li {
  padding: 15px;
  color: #000;
  font-size: 14px;
  font-weight: bold;
}
.navbar ul li a {
  color: #000;
  text-decoration: none;
}
.navbar ul li a:hover {
  text-decoration: none;
  color: #000;
}
span.reference {
  position: fixed;
  left: 10px;
  bottom: 10px;
  font-size: 13px;
  font-weight: bold;
}
span.reference a {
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  padding-right: 20px;
}
span.reference a:hover {
  color: #ddd;
  text-decoration: none;
}
.table {
  display: table;
  /* Allow the centering to work */
  margin: 0 auto;
}

Answer 2

以下代码非常适合垂直居中div中的项目。本文还有一些您可能会觉得有用的其他方案 - ＆gt; Centering Items

div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%); /* IE=9*/
}

需要在DIV中水平和垂直居中对齐UL，并垂直居中对齐作为文本和图像的列表元素

2 个答案: