center menu items will be displayed as a fallback in case flexbox is unavailable

The code I have creates space between menu items and centers them both horizontally and vertically within each item.

This is achieved by using a wrapper for the menu items:

.gel-layout {
    list-style: none;
    direction: ltr;
    text-align: left;
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
    margin-right: 0;
    margin-left: -8px;
    padding-right: 0;
    padding-left: 0;
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
}

.gel-layout--middle {
    align-items: center;
}

And for each individual item:

.gel-layout__item {
    width: 100%;
    display: inline-block;
    padding-left: 8px;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    letter-spacing: normal;
    word-spacing: normal;
    text-rendering: auto;
}

.gel-layout--fit > .gel-layout__item {
    width: auto;
    flex: 1 1 auto;
}

.gel-layout--equal > .gel-layout__item {
    display: flex;
}

.gel-layout--middle > .gel-layout__item {
    vertical-align: middle;
}

Is it possible to achieve the same effect for browsers that do not support flexbox?

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

html,
body {
  background-color: #000000;
  color: #ffffff;
  margin: 0 auto;
  line-height: 1;
  height: 100%;
  text-rendering: optimizeSpeed;
}

body {
  font-size: 160%;
  margin: 0;
  text-rendering: optimizeLegibility;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* autoprefixer: off */


/**
     * Grid containing element
 */

a {
  color: #fff;
}

path {
  fill: #ffffff;
}

.menu__container:after {
  content: '';
  display: table;
  clear: both;
}

.menu__container ul li {
  display: inline-block;
  vertical-align: middle;
}

.menu__container ul li a {
  padding-left: 1rem;
}

.gel-wrap {
  max-width: 1008px;
  margin: 0 auto;
  padding-right: 8px;
  padding-left: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 25em) {
  .gel-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 80em) {
  .gel-wrap {
    max-width: 1280px;
  }
}


/**
     * A grid row
 */

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

@media (min-width: 37.5em) {
  .gel-layout {
    margin-left: -16px;
  }
}

.opera-only:-o-prefocus,
.gel-layout {
  word-spacing: -0.43em;
}


/**
     * A single grid item
 */

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}

@media (min-width: 37.5em) {
  .gel-layout__item {
    padding-left: 16px;
  }
}


/**
     * Layouts with no gutters.
 */

.gel-layout--flush {
  margin-left: 0;
}

.gel-layout--flush>.gel-layout__item {
  padding-left: 0;
}


/**
     * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
     * markup will display in order 4, 3, 2, 1 on your page
     */

.gel-layout--rev {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.no-flexbox .gel-layout--rev {
  direction: rtl;
  text-align: left;
}

.no-flexbox .gel-layout--rev>.gel-layout__item {
  direction: ltr;
  text-align: left;
}


/**
     * Align layout items to the vertical centers of each other
     */

.gel-layout--middle {
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

.gel-layout--middle>.gel-layout__item {
  vertical-align: middle;
}


.gel-layout--center {
  text-align: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.gel-layout--auto>.gel-layout__item {
  width: auto;
}


.gel-layout--no-flex {
  min-width: 100%;
}

.gel-layout--no-flex,
.gel-layout--no-flex>.gel-layout__item {
  display: block;
  display: inline-block;
}


.gel-layout--equal>.gel-layout__item {
  display: -webkit-flex;
  display: flex;
}


/**
         * Allow items to devide the space equally between the number of items
         */

.gel-layout--fit>.gel-layout__item {
  width: auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}


/**
         * Align a single grid item to the top
         */

.gel-layout__item--top {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}


/**
         * Align a single grid item to the center
         */

.gel-layout__item--center {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}


/**
         * Align a single grid item to the bottom
         */

.gel-layout__item--bottom {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.gel-layout--middle {
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Cutting-Edge Solutions (Scotland)</title>
</head>

<body>
  <div id="root">
    <header role="banner" aria-label="Cutting-Edge Solutions (Scotalnd)">
      <nav class="menu__container">
        <div class="gel-wrap">
          <div class="gel-layout gel-layout--middle gel-layout--equal gel-layout--fit">
            <div class="gel-layout__item      ">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                  <path d="M20 0 L40 20 L20 40 L0 20"></path>
                </svg>
            </div>
            <div class="gel-layout__item      "><a href="/">Home</a></div>
            <div class="gel-layout__item      "><a href="/oss">OSS</a></div>
            <div class="gel-layout__item      "><a href="/blog">Blog</a></div>
            <div class="gel-layout__item      "><a href="/privacy-policy">Privacy Policy</a></div>
          </div>
        </div>
      </nav>
    </header>
    <div class="gel-wrap">
      <h1>Home</h1>
    </div>
  </div>
</body>

</html>

htmlcss

Answer №1

CSS Tables are a great solution for this task:

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

html,
body {
  background-color: #000000;
  color: #ffffff;
  margin: 0 auto;
  line-height: 1;
  height: 100%;
  text-rendering: optimizeSpeed;
}

body {
  font-size: 160%;
  margin: 0;
  text-rendering: optimizeLegibility;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* autoprefixer: off */


/**
     * Grid containing element
 */

a {
  color: #fff;
}

path {
  fill: #ffffff;
}

.menu__container:after {
  content: '';
  display: table;
  clear: both;
}

.menu__container ul li {
  display: inline-block;
  vertical-align: middle;
}

.menu__container ul li a {
  padding-left: 1rem;
}

.gel-wrap {
  max-width: 1008px;
  margin: 0 auto;
  padding-right: 8px;
  padding-left: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 25em) {
  .gel-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 80em) {
  .gel-wrap {
    max-width: 1280px;
  }
}


/**
     * A grid row
 */

.gel-layout {
  list-style: none;
  direction: ltr;
  display: table;
  table-layout: fixed;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

.gel-layout__item {
  display: table-cell;
  padding-left: 8px;
  text-align: left;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}
<nav class="menu__container">
  <div class="gel-wrap">
    <div class="gel-layout gel-layout--middle gel-layout--equal gel-layout--fit">
      <div class="gel-layout__item      ">
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                  <path d="M20 0 L40 20 L20 40 L0 20"></path>
                </svg>
      </div>
      <div class="gel-layout__item      "><a href="/">Home</a></div>
      <div class="gel-layout__item      "><a href="/oss">OSS</a></div>
      <div class="gel-layout__item      "><a href="/blog">Blog</a></div>
      <div class="gel-layout__item      "><a href="/privacy-policy">Privacy Policy</a></div>
    </div>
  </div>
</nav>

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

Is the background image unable to fill up the entire screen?

I'm currently facing an issue with my webpage's background not covering the entire vertical space. Despite trying different solutions and referring to previous posts, I haven't been able to resolve it yet. Here is the relevant code: <div ...

htmlcss

Having trouble with string matching in JavaScript?

My attempts to verify my Ajax response with a string have consistently resulted in a fail case being printed. Below is the section of code relating to my ajax request: var username = document.getElementById("name").value; var password = document.getEle ...

javascripthtmlajax

Is there a way to change the color of a number's font based on whether it is preceded by a "+" or "-" sign?

I am currently working on a stocks widget and I have a specific requirement. Whenever there is a change in value in the Change or Changeinpercent columns, I need to dynamically set the font color to red for a decrease (-) or green for an increase (+). Her ...

jqueryhtmlcssjson

Attempting to get the boxes in the final row to show up

Exploring new territories in web design, I'm currently working on achieving the layout shown below: Box Layout I've encountered an issue where the last row of 4 boxes in the middle section is not appearing as intended. Once this row is successfu ...

htmlcss

How to style multiple tags using CSS

Is there a way to style specific tags in CSS? <style type="text/css"> [attribute*="test"] { background-color: red; } </style> However, this method does not seem to work for the following tags: <test-1> </test-1> <t ...

htmlcsscss-selectors

Refusing to cease downloading music on the local server through the embedded audio element

I was trying to setup background music on my website, but when I test it localhost, the music download instead of playing. However, when I tested with the full path, it played as expected. How can I prevent the download from happening in localhost? Here i ...

javascripthtml

Radiant Curvature Background Gradient

On my website, I'm trying to replicate the unique background gradient found here. Unlike a basic linear gradient that can be easily repeated as an image to fill any length, this one poses a challenge. Can anyone share a technique or method to help me ...

htmlcssradial-gradients

Executing a function every time a prop is updated within the component

I have a prop named transcript in one of my components. Whenever I speak a voice intent, it gets updated. I want to execute a function every time the transcript changes and pass the transcript as an argument. In this code snippet, I attempted to use an On ...

javascripthtmlreactjsonchangereact-props

Tips for saving the latest counter value in CSS and showcasing it as content in HTML

Here is an example of how my CSS code is structured: .page-number:after { counter-increment: page; } If we were to display 6 pages, it would look something like this: .page-number:after { content: 'Page ' counter(page) ' of'; } ...

htmlcsscss-counter

Using JQuery to cycle a class with a timer

My list has the following structure <div id="slider"> <ul> <li class='active'> a </li> <li> b </li> <li> c </li> <li> d </li> <li> e </li> </u ...

javascriptjqueryhtmltimer

Issue with non-responsive images in Bootstrap 3

Here is the bootstrap configuration that I am currently using: http://www.bootply.com/118172 I'm having an issue with the responsiveness of the image. It's not shrinking to match the height of the div on the left side. Can anyone help me trouble ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for displaying a setCustomValidity message or tooltip without needing to submit the event

Currently, I am utilizing basic form validation to ensure that the email entered is in the correct format. Once validated, the data is sent via Ajax for further processing. During this process, I also check if the email address is already in use and whethe ...

javascriptformshtmlvalidationtooltip

What could be causing the image file input to appear sideways or flipped?

I am currently working on a Vuejs component that allows users to select a file from their local system. Once the user selects an image, it is previewed in a div. However, I have noticed that some images appear 'flipped' sideways automatically, es ...

javascripthtmlcssvue.jsvuejs2

The hover effect is not activated by the mouse movement event

I previously encountered an issue related to flickering with an absolute div when moving my mouse, which I managed to resolve by increasing the distance between my mouse pointer and the div. Now, I am working on the next phase of my project: My goal is t ...

javascriptjqueryhtmlcss

Implementing div elements in a carousel of images

I've been working on an image slider that halts scrolling when the mouse hovers over it. However, I'd like to use div tags instead of image tags to create custom shapes within the slider using CSS. Does anyone have any advice on how to achieve th ...

javascripthtmlcss

Adjust the position of the icon in the Mui DatePicker widget

How can I customize the mui DatePicker? I successfully changed the icon, but now I need to adjust its position as well. Instead of being at the end of the text, I want the icon to be at the beginning. Here is my code: <ThemeProvider theme={calendarThem ...

htmlcssreactjsmaterial-uiicons

Achieving horizontal scrolling for tables without using div wrappers

Whenever the width of tables in my articles exceeds the available space in the webpage layout, I wanted to enable horizontal scrolling. Despite trying to accomplish this with CSS alone, I was unsuccessful. As a result, I resorted to enclosing everything i ...

htmlcssoverflowcss-tables

Whenever I try to open my jQuery UI Dialog without first displaying an alert, it does not work

Beginning of my HTML page, initializing a dialog : <script type="text/javascript"> $(function() { $( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: true, height:180, width:300, modal: true, buttons: { "Yes": ...

javascriptjqueryhtmljquery-uidialog

In the XHTML mode, MathOverflow's invaluable mathematical expertise shines brightly

I am interested in incorporating the unique “piece of valuable flair™” from MathOverflow onto my website. The issue I am facing is that I want my webpage to comply with XHTML5 standards, meaning it should be served with the MIME type application/xht ...

javascriptjquerymime-typesstackexchangehtml

jQuery does not have the capability to access the href attribute through DOM manipulation

I've been trying to extract the href attribute from a link in my code and create a new link using that attribute. However, I'm facing an issue where the created link doesn't seem to work properly - it keeps showing a 404 error message like t ...

javascriptjqueryhtml