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

Question

I am trying to do the following:

Vertically and horizontally center a list within a 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>

Answer 1

Remove float: left from the .navbar ul li rule, then apply the following CSS.

This works with the vertical-align property, which only applies to inline and inline-block elements. So we have to set all of the list items to display: inline-block and vertical-align:center to center them within the list.

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

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>

Answer 2

The following code is great for vertically centering items within divs. 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*/
}

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

Question

2 answers

solution1
0 ACCPTED

solution2
0 2015-07-30 23:43:44

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

Question

2 answers

solution1 0 ACCPTED

solution2 0 2015-07-30 23:43:44

solution1
0 ACCPTED

solution2
0 2015-07-30 23:43:44