How to align a menu to center to look uniform? - html

Question

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.
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/bootstrap#5.2.3/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>

Answer 1

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.

Answer 2

Here's how I might go about this.
Get rid of floats. They're not a modern layout technique.
Use flexbox with Bootstrap's classes (and a bit of custom CSS)
Get rid of your hard widths. Let the content determine that.
Use flexbox to space the menu items, too.
Don't use paragraphs for menu items. That's not their purpose.
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/bootstrap#5.2.3/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>