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

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

从 .navbar ul li 规则中删除 float: left，然后应用以下 CSS.

这适用于 vertical-align 属性，仅适用于 inline 和 inline-block 元素。所以我们必须将所有列表项设置为 display: inline-block 和 vertical-align:center 以使它们在列表中居中。

然后为了使导航居中，我们将 CSS 伪元素应用于容器并将其设置为 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;
}

<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 2

以下代码非常适合在 div 中垂直居中项目。本文还有一些您可能会觉得有用的其他场景 -> Centering Items

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

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

Need to horizontally and vertically center align UL in DIV, and vertically center align the list elements which are text and images

html

css

image

html-lists