需要水平和垂直居中对齐DIV中的UL，并且垂直居中对齐文本和图像的列表元素
[英]Need to horizontally and vertically center align UL in DIV, and vertically center align the list elements which are text and images
问题描述
I am trying to do the following: 
我正在尝试执行以下操作：
- Vertically and horizontally center a list within a div. 将列表在div中垂直和水平居中。
- Vertically center the list items. 将列表项垂直居中。 One item is an image, the others are text. 一个项目是图像，其他项目是文本。
I've looked at a many solutions but can only manage to get the list horizontally centered. 我看过很多解决方案，但只能设法使列表水平居中。 I cannot get the list centered vertically. 我无法使列表垂直居中。 And I cannot get the list items centered vertically. 而且我无法使列表项垂直居中。
How can I achieve this? 我该如何实现？
$(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>
2 个解决方案
解决方案1
0 已采纳
Remove float: left from the .navbar ul li rule, then apply the following CSS. 从.navbar ul li规则中删除float: left ，然后应用以下CSS。
This works with the vertical-align property, which only applies to inline and inline-block elements. 这与vertical-align属性一起使用，该属性仅适用于inline和inline-block元素。 So we have to set all of the list items to display: inline-block and vertical-align:center to center them within the list. 因此，我们必须将所有列表项设置为display: inline-block和vertical-align:center以使其在列表中居中。
Then to center the nav, we apply a CSS pseudo element to the container and set it to height: 100% , display:inline-block and vertical-align: center 然后，为了使导航居中，我们将CSS伪元素应用于容器，并将其设置为height: 100% ， display:inline-block和vertical-align: center
See the demo below to preview this effect. 请参阅下面的演示预览此效果。
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>
解决方案2
0 2015-07-30 23:43:44
The following code is great for vertically centering items within divs. 以下代码非常适合在div中垂直居中放置项目。 This article has a few other scenarios that you might find useful -> Centering Items 本文还提供了一些其他有用的方案-> 居中项
div {
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%); /* IE=9*/
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.