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

我正在尝试做以下事情:

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

将float: left从.navbar ul li规则中移除，然后应用以下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>

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

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

相关内容

最新更新

热门标签：