Aligning items vertically within a container with a constant height

I'm currently working on a website that requires a pixel-based navbar with a height of 80px.

The issue I'm facing is the difficulty in vertically centering the ul and li elements.

I have experimented with various methods such as using 

top:50%; transform: translate(0,-50%)
and flex positioning, but so far, none have yielded the desired result.

For reference, you can view my code snippet on Jsfiddle here: https://jsfiddle.net/agreyfield91/w3s8cj92/

header {
  height: 80px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
}

footer {
  background: #ddd;
}

* {
  color: transparent
}

nav {
  height: 100%;
  width: 100%;
  background-color: bisque;
}

nav ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  top: 50%;
  transform: translate(0, -50%);
}

nav ul li {
  display: inline-block;
  float: left;
}

nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 10px;
}
<header class="nav-down">
  <nav class="headernav">
    <ul>
      <li><a href="#">Gig</a></li>
      <li><a href="#">ity</a></li>
      <li><a href="#">element</a></li>
    </ul>
  </nav>
</header>

htmlcssflexboxcss-position

Answer №1

Make sure to include display flex and align-self center in your code: https://jsfiddle.net/w3s8cj92/1/

header {
  height: 80px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
}

footer {
  background: #ddd;
}

* {
  color: transparent
}

nav {
  height: 100%;
  width: 100%;
  background-color: bisque;
  display: flex;
}

nav ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  top: 50%;
  align-self: center;
}

nav ul li {
  display: inline-block;
  float: left;
}

nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 10px;
}
<header class="nav-down">
  <nav class="headernav">
    <ul>
      <li><a href="#">Gig</a></li>
      <li><a href="#">ity</a></li>
      <li><a href="#">element</a></li>
    </ul>
  </nav>
</header>

Answer №2

To achieve the desired effect, you can either apply position: relative to nav and position: absolute to nav ul (along with 

top: 50%; transform: translate(0,-50%);
) or use 
display: flex; align-items: center
directly on nav. Personally, I recommend using flexbox for simplicity.

header {
  height: 80px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
}

footer {
  background: #ddd;
}

* {
  color: transparent
}

nav {
  height: 100%;
  width: 100%;
  background-color: bisque;
  display: flex;
  align-items: center;
}

nav ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  float: left;
}

nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 10px;
}
<header class="nav-down">
  <nav class="headernav">
    <ul>
      <li><a href="#">Gig</a></li>
      <li><a href="#">ity</a></li>
      <li><a href="#">element</a></li>
    </ul>
  </nav>
</header>

Answer №3

Your code could actually be simplified like this:

nav {
  height: 80px;
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;   /* align child elements horizontally (optional) */
  background-color: bisque;
}

nav a {
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  display: flex;
  align-items: center;      /* align text vertically */
  border: 1px dashed red;
}
a + a {
  margin-left: 20px;
}
<nav>
  <a href="#">Gig</a>
  <a href="#">ity</a>
  <a href="#">element</a>
</nav>

Answer №4

If you're dealing with a fixed height block, there's a way to center elements by using a container with the "nowrap" property and vertically aligning inline[-block] elements.

.vertical-container {
  height: 80px;
  border: 1px solid black;
  white-space: nowrap;
  /* this prevents vertical block to "fall out" of container */
}

.vertical-aligner {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}

.vertical-content {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
  white-space: normal;
  /* reset white-space for content */
}
<div class="vertical-container"><span class="vertical-aligner"></span><span class="vertical-content">Text that should be vertically middle of container</span></div>

Check out your fiddle here for the updated code: https://jsfiddle.net/w3s8cj92/2/

P.S. I'll provide more information later

Answer №5

Styling with CSS

header {
    height: 80px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    display: table;
}

footer { background: #ddd;}
* { color: transparent}
nav {
    height: 100%;
  width: 100%;
  background-color: bisque;
}
nav ul {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    height: 80px;
}
nav ul li {
  display: inline-block;
    float: left;
}
nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 10px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Adding Negative Values to Tailwind CSS Utility Plugin Quick Summary: I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, simi ...

javascriptcssreactjsnext.jstailwind-css

Utilizing Bootstrap datepicker to set maximum and minimum dates based on another date input

I have been attempting to create a restriction on the date selection, where datepicker1 cannot exceed datepicker2, and vice versa. Initially, I tried implementing this feature using (Linked Pickers). Unfortunately, this did not achieve the desired date in ...

jqueryhtmltwitter-bootstrap

Styling menus with CSS

I'm struggling with a CSS issue while attempting to add a 1px solid black line after each element in my drop-down table menu. The current appearance of my menu is causing some trouble. What I desire for it to look like involves applying border: 1px s ...

htmlcss

In PHP/HTML, if the URL is domain.co.uk/?debug, then the following action will

Apologies for what may seem like a basic question, but I've been searching for a clear answer with no luck! My goal is simple - when someone goes to , I want to show extra details, like the code version or any other notes I include. Once again, sorr ...

phpjavascripthtmldebuggingurl

Adjusting the height of a container dynamically in React while flex items wrap using CSS

In my React project, I have a container called "answers-container" with multiple buttons inside it, laid out using flexbox with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded. However, I'm facing an issu ...

javascripthtmlcssreactjs

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

Within my div element lies a collection of other div elements. These elements contain lengthy text that may span multiple pages. I am attempting to print this text starting 50mm from the top edge of every physical paper, and stopping 20mm before the edge o ...

htmlcssprintingmedia-queries

Why my attempts to alter numerous CSS elements using JQuery are failing?

Here's the code snippet I'm working with: var showThis = $(this).attr('id'); // div0, div1, div2 etc. $('#' + showThis).attr('style', 'background-color: #063 !important, height: 520px'); I am trying to mo ...

javascriptjquerycssattr

Ways to determine the success of $wpdb->query and retrieve the outcome

Currently, I am in the process of developing a WordPress website, I have implemented a form that allows users to make modifications and update the database: Below is the HTML/PHP code snippet: echo '<form class="form-verifdoc" target=&q ...

javascriptphphtmlwordpress

Get rid of the margins on your Wordpress theme

Currently, my Wordpress site is using the Tesseract theme which can be found at (http:// instantiwebs . com) I am interested in removing the left/right margins on all elements, similar to what has been done on this website: . Interestingly enough, they al ...

htmlcsswordpressmargins

Adding a gap between the Bootstrap navbar and jumbotron for better spacing

Upon examining the Bootstrap example provided at: http://getbootstrap.com/examples/navbar/ I noticed there is a gap between the jumbotron and the navbar. After delving into the example's CSS, I found that disabling this rule (twice): .navbar { ...

csstwitter-bootstrap

Retrieve the file path of an uploaded image in a Razor view using jQuery Ajax

I have been facing challenges while working on an ASP.NET MVC3 application where I am developing a custom image gallery. The browser being targeted is IE9, which rules out the option of using HTML5 File API. All my code resides within a strongly typed Razo ...

jqueryhtmlajaxasp.net-mvc-3razor

Edit: "Submit a binary file with just JavaScript"

I am currently developing a Chrome application that utilizes the HTML5 Filesystem API to enable users to import and synchronize files. A challenge I'm facing is when attempting to sync image files, as they appear to become corrupted during the upload ...

javascriptajaxhtmlgoogle-chromemootools

jQuery Mobile elements remain resident in the memory

I'm currently working on a jQuery mobile app that includes a chart created with Highcharts, which can be exported using CanVG and canvas2ImagePlugin. However, I've noticed that the chart object remains in memory. As a result, if the page is opene ...

javascriptjqueryhtmljquery-mobile

Unusual occurrence with the nth-child selector

For the fiddle, click here - http://jsfiddle.net/ashwyn/a45ha/ To see the HTML code, take a look below: <div class="parent"> <div class="a">Class A</div> <div class="b">Class B1</div> <div class="b">Class B ...

jqueryhtmljquery-selectors

The login form is not being recognized by Chrome

I've been working on creating a login form for my website. Oddly enough, when I try to use it on Chrome, it doesn't prompt me to save my password. Yet, it functions properly on other browsers like Edge, Firefox, and Internet Explorer. Here' ...

phphtmlformsgoogle-chromeauthentication

instructions on sending the complete product quantity to the payment gateway

I am currently in the process of developing an ecommerce website using Django. When a user clicks on checkout, an HTML billing form appears prompting them to enter their address and email information. Previously, I successfully passed data such as email t ...

htmljsondjangoajaxe-commerce

Leveraging the power of angular's $asyncValidators by implementing a cache

I've created a validation directive that verifies a value against an endpoint App.directive('validate', function(fooService, $q) { return { restrict: "A", require: "ngModel", link: function(scope, elem, attrs, ngModel) { ...

javascripthtmlcssangularjs

Looking to display a different HTML document in a div - any suggestions?

I am in the process of creating a website that will feature four tiles on the front page. Once a tile is clicked, I would like the content to appear in a window that has a slight transparency to allow the main page to show through. So far, I have managed ...

phpjavascriptjqueryhtmlajax

Resizeable drag and drop two-column design

Experimenting with creating a drag re-sizable layout using jQuery UI was quite an interesting challenge for me. If you want to check out the result, here is the link. However, my original goal was to achieve something different from what I ended up with. ...

jquerycssjquery-ui

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

Situation: I want to create a Zingchart graph from a CSV file containing 37 columns. The header in the CSV file will be used as the legend for the graph. Issue: When I define less than 10 elements in the header (including the X-axis name), everything wo ...

javascripthtmlchartszingchart