Question 45407 in Html Question posted in
Some basic documentation can be found here.

How to align a menu to center to look uniform? – Html

I have got a problem with my design. I am trying to align a menu to center, but I need it to be uniform. I need it to be somehow as it is in the below picture.

enter image description here

I do not get why my code is aligning irregularly if I set text-align:center for .menu. And if I use align left, it send them back to the left border. The parent left-menu should align them center, and menu should align them 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/[email protected]/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>
Tags:

2

Answers


  1. 0

    You can try setting the menu items to display as inline-block and then center aligning the parent container.

    Add this to your CSS code:

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

    Also change the text-align property on 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;
}

    This should center align the menu items vertically and horizontally.

    Login or Signup to reply.
  2. 0

    Here’s how I might go about this.

    1. Get rid of floats. They’re not a modern layout technique.
    2. Use flexbox with Bootstrap’s classes (and a bit of custom CSS)
    3. Get rid of your hard widths. Let the content determine that.
    4. Use flexbox to space the menu items, too.
    5. Don’t use paragraphs for menu items. That’s not their purpose.
    6. Do use semantic elements and ARIA labels for the menu for better accessibility. See https://www.w3.org/WAI/tutorials/menus. If you follow Bootstrap’s guides you’ll see a lot of that kind of thing.

    Also review the Bootstrap docs to avail yourself of all it offers. You’re duplicating code with some of your CSS, which Bootstrap provides already.

    .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/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search