What is the best way to center a menu for a cohesive and balanced appearance?

I am encountering an issue with my design. I am attempting to center-align a menu, but I want it to appear uniform and consistent. I want it to resemble the layout shown in the image link below.

https://i.sstatic.net/D3Rep.png

I cannot understand why my code is not aligning properly when I apply text-align:center to the .menu class. When I try aligning left, it shifts them back to the left edge. The parent class left-menu should center-align them, while the menu class should align them to the left-center.

.left-menu {
  width: 15%;
  float: left;
  background-color: lightgrey;
  height: 100%;
  text-align: center;
  color: #3f3f3f;
}

.right-content {
  width: 85%;
  float: right;
  background-color: white;
  height: 100%;
}

.menu {
  height: 100%;
  text-align: left;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d38233f233e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="left-menu">
  <div class="menu">
    <p><i class="fa-brands fa-slack"></i><span class="ms-1 d-none d-sm-inline">Dashboard</span></p>
    <p><i class="fa-brands fa-twitter"></i><span class="ms-1 d-none d-sm-inline">Twitter</span></p>
    <p><i class="fa-brands fa-linkedin-in"></i><span class="ms-1 d-none d-sm-inline">LinkedIn</span></p>
    <p><i class="fa-brands fa-youtube"></i><span class="ms-1 d-none d-sm-inline">YouTube</span></p>
    <p><i class="fa-solid fa-gear"></i><span class="ms-1 d-none d-sm-inline">Settings</span></p>
    <p><i class="fa-solid fa-right-from-bracket"></i><span class="ms-1 d-none d-sm-inline">Logout</span></p>
  </div>
</div>
<div class="right-content">
</div>

htmlcssbootstrap-5

Answer №1

To align the menu items, consider changing their display property to inline-block and then center-aligning the parent container.

You can achieve this with the following CSS:

.menu p {
  display: inline-block;
  margin: 20px 0;
}

Additionally, modify the text-align property in the .left-menu class:

.left-menu {
  width: 15%;
  float: left;
  background-color: lightgrey;
  height: 100%;
  text-align: center;
  color: #3f3f3f;
  display: flex;
  align-items: center;
  justify-content: center;
}

By implementing these changes, you should be able to center align the menu items both vertically and horizontally.

Answer №2

Here's my approach to solving this issue.

  1. Avoid using floats, as they are outdated for layout design.
  2. Utilize flexbox along with Bootstrap classes and some custom CSS.
  3. Avoid specifying hard widths, and let the content dictate the sizing.
  4. Employ flexbox to evenly space out the menu items.
  5. Reserve paragraphs for their intended use and format menu items appropriately.
  6. Enhance accessibility by incorporating semantic elements and ARIA labels for the menu. Refer to this resource and follow Bootstrap's guidelines.

Additionally, consult the Bootstrap documentation to take advantage of its features. Avoid redundant CSS by utilizing Bootstrap's existing capabilities.

.left-menu {
  background-color: lightgrey;
  text-align: center;
  color: #3f3f3f;
}

.right-content {
  background-color: white;
  height: 100%;
}

.menu {
  height: 100%;
  text-align: left;
}

.menu>div {
  white-space: nowrap;
  justify-content: space-around;
}

.menu>div>i {
  margin-right: 1rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060150e120e13">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="d-flex">
  <div class="left-menu">
    <div class="menu d-flex flex-column px-3">
      <div><i class="fa-brands fa-slack"></i><span class="ms-1 d-none d-sm-inline">Dashboard</span></div>
      <div><i class="fa-brands fa-twitter"></i><span class="ms-1 d-none d-sm-inline">Twitter</span></div>
      <div><i class="fa-brands fa-linkedin-in"></i><span class="ms-1 d-none d-sm-inline">LinkedIn</span></div>
      <div><i class="fa-brands fa-youtube"></i><span class="ms-1 d-none d-sm-inline">YouTube</span></div>
      <div><i class="fa-solid fa-gear"></i><span class="ms-1 d-none d-sm-inline">Settings</span></div>
      <div><i class="fa-solid fa-right-from-bracket"></i><span class="ms-1 d-none d-sm-inline">Logout</span></div>
    </div>
  </div>

  <div class="right-content px-3">
    Right Content
  </div>
</div>

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

The form submission did not yield any results

function calculateCost() { var projectorCost=0,price=0,quantity=0,discountPrice=0,totalCost=0; var modelName=document.getElementById('projectormodel').value; var quantity=document.getElementById('q ...

javascripthtmlcssweb

Model-view-controller datasets incorporating viewbags

How can I utilize a dataset in a viewbag to showcase the data in a view? I have obtained a dataset from a model and stored it in a viewbag. My intention is to extract the datarows using a foreach loop within the view. Since I already have a variable bein ...

c#htmlsqlasp.net-mvc

I'm looking for a recommendation for a canvas library that can handle basic 3D rendering

I'm looking to create a basic preview of a Minecraft character with the correct texture applied, without worrying about advanced animations or detailed lighting at this point. I prefer to use canvas rather than relying on WebGL, which is not widely su ...

htmlcanvas3dtexturestexture-mapping

Preventing scrolling on a YouTube video embed

I have been working hard on developing my personal website. One issue I encountered is that when there is a YouTube video embedded in the site, it stops scrolling when I hover over it. I would like the main document to continue scrolling even if the mouse ...

javascriptjqueryhtmliframeyoutube

Setting the minimum width for a grid item in a React Material UI component

Is there a way to ensure that a material-ui Grid item has a minimum width of 250 pixels? I've tried using the sizing suggestions from Material UI's documentation, but haven't had any success. The 'logo' element within the Grid cont ...

cssreactjsmaterial-ui

Problem with custom validation in Bootstrap 5

Utilizing bootstrap 5 for form validation, I have encountered an issue with applying the 'is-invalid/is-valid' class to the date field 'dob' within a custom date validation method called validate_dob(). I attempted performing the date ...

validationbootstrap-5

Tips for creating a smooth scrolling header menu on a standard header

<script> $(document).ready(function(){ $(".nav-menu").click(function(e){ e.preventDefault(); id = $(this).data('id'); $('html, body').animate({ scrollTop: $("#"+id).o ...

javascripthtmljquery

Count divisions using PHP and the LI function

I'm struggling with a loop that is responsible for displaying <li> elements, and I need to incorporate a new class into the first item, as well as every sixth subsequent <li> element. For example: while ($db_field = mysql_fetch_assoc($re ...

phpmysqlhtml

Enhance your view of the iFrame's CONTENT by zooming in

I'm attempting to magnify (without altering the dimensions) an iFrame containing a SWF file. <iframe src="http://ray.eltania.net/TEST/swf-play/swf/testMotion.swf" width="600px" height="500px" frameBorder="0"></iframe> http://jsfiddle.net ...

jqueryhtmlflashzooming

What is the best method for incorporating various HTML checklist items into PHP code?

I am struggling to include multiple checklist values within an if-else statement. Currently, I am only able to insert a single value into the condition even if I select multiple options. Below is my code snippet: <?php $db_host = 'localhost&a ...

phphtmlformsinput

Typekit compatibility with Internet Explorer 11

After dedicating months to a project, everything seemed to be running smoothly until one client consistently pointed out font discrepancies in the screenshots. I attributed this to a possible browser issue but soon discovered that the entire network had sp ...

cssinternet-explorertypekit

Is there a way to use JavaScript or jQuery to automatically convert HTML/CSS files into PDF documents?

While using OS X, I noticed that in Chrome I have the option to Save as PDF in the print window by setting the destination to "Save as PDF". Is this feature available on Windows? Is there a way to easily save to PDF with just one click? How can I access t ...

javascriptjqueryhtmlcsspdf

JavaScript: Developing an interactive Word Guessing Game

Here's some sample code: let ccdisplay = document.querySelector('.crrDisplay'); let incdisplay = document.querySelector('.incDisplay'); let guess = document.querySelector('#character'); let textForm = document.q ...

javascripthtmlloops

Switching the cursor to the following input after a paste event using JQuery

I am currently working on an HTML form that consists of multiple input boxes. I'm looking to focus on the next input box after pasting content into one of them. Below is the code snippet I have been using: $("input").bind('paste', function( ...

javascriptjqueryhtmlkeyboard-eventsjquery-events

"Utilizing Primeng's P-Table Component for Enhanced Interactivity

https://i.sstatic.net/UQZYV.png Greetings to all! I am currently working with p-table, p-headercheckbox, and p-tableCheckbox along with additional filters for each column. However, I am encountering an issue where the filters are not aligning properly wit ...

htmlangularfrontendprimengprimeng-datatable

Tips for adding style to a group of SVG elements:

I currently have an array of .svg icons, each with unique properties that I need to customize: <svg width="24" height="24" viewBox="0 0 24 24"> ... </svg> import styled from 'styled-components'; import Github from 'assets/git ...

javascriptcssreactjssvgstyled-components

The cakePHP time dropdown feature lacks customization options

When viewing my form in CakePHP, I noticed that the time select dropdown appears differently in Chrome compared to Firefox. In Firefox, there are 3 arrow buttons attached to each dropdown, whereas in Chrome it looks different. I want to hide the arrow but ...

csscakephptime

Complete a form when a link or button on the webpage is clicked

I have a variety of links and buttons on my webpage, and they are generated dynamically. I am unable to assign an onclick event to each one individually. My goal is to submit form data to the next page whenever any link or button on the page is clicked. ...

javascriptjqueryhtml

Ensure to verify the presence of a null value within the ngFor iteration

I have a webpage where I am displaying information in buttons. These buttons show various objects from a list along with their corresponding fields (e.g. object.name, object.age, etc.). Sometimes, one of those fields is null. How can I check if a value is ...

javascripthtmlangularjsangular

`Issues encountered with resizing the menu``

Looking to create a unique restaurant horizontal list bar for my application. The goal is to have a horizontal menu that displays 3 options on the screen at a time, with the middle one being the largest and the two flanking it smaller in size. As I scroll ...

javascripthtmlcss