Unable to left align sidebar links keeping them centered

position: fixed center
div align: center
text-align
center div horizontally and vertically
center fixed div
center image in div vertically and horizontally
center fixed div vertically
html body align: center

I'm working on a navbar where the links are vertically centered. What I've been trying to achieve is make all the links left-aligned, i.e. all the links should start from the left but keeping them centered.

As you can see from the snippet that the links are centered(which I want) but there isn't any alignment. I want the links to start from the same line. Something like this:

Home
About Us
Products
Contact Us

but should be centered on the navbar.

This is the code I tried:

body {
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: content-box;
  background: transparent;
}

.container {
  background: transparent;
  width: 100vw;
  height: 100vh;
}

.nav-sidebar {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: grey;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5)), url(https://i.ibb.co/1TBvfyP/1.jpg);
  border-right: 1px solid #000;
  box-shadow: inset 0px 5px 30px rgba(0, 0, 0, 0.9), 0px 10px 15px 5px #000;
  z-index: 9999;
}

.nav-sidebar .logo {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 7px;
}

.logo img {
  width: 70px;
  height: 70px;
  -webkit-filter: drop-shadow(5px 10px 1px #000);
  filter: drop-shadow(5px 10px 2px #000);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nav-sidebar .main-nav {
  width: 100%;
  height: 185px;
  margin-top: 40px;
}

.nav-sidebar .main-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-sidebar .main-nav ul li {}

.nav-sidebar .main-nav ul li a {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
}
<div class="container-fluid">

  <div class="col-sm-3 col-md-2 col-lg-2 col-xl-2 nopadding">

    <div class="nav-sidebar">

      <div class="logo">
        <img src="https://i.ibb.co/RQGBXjK/logo.png">
      </div>

      <div class="main-nav">
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>

    </div>

  </div>

  <div class="col-sm-9 col-md-10 col-lg-10 col-xl-10">
  </div>

</div>

See the CSS. I've commented out a lot of the styles you had, and added a couple to show the effect better. The main code that does what you want is this:

.nav-sidebar .main-nav{
    display: flex;
    justify-content: center;
}

body {
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    box-sizing: content-box;
    background: transparent;
}


.container{
    background: transparent;
    width: 100vw;
    height: 100vh;
}

.nav-sidebar {
    /*height: 100vh;*/
    margin: 0;
    padding: 0;
    background-color: grey;
    background: linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0.5)),url(https://i.ibb.co/1TBvfyP/1.jpg);
    border-right: 1px solid #000;
    box-shadow: inset 0px 5px 30px rgba(0,0,0,0.9), 
                0px 10px 15px 5px #000;
    z-index: 9999;
    width:200px;
}


.nav-sidebar .logo {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 7px;
}


.logo img{
    width: 70px;
    height: 70px;
    -webkit-filter: drop-shadow(5px 10px 1px #000);
    filter: drop-shadow(5px 10px 2px #000);
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.nav-sidebar .main-nav{
    /*width: 100%;
    height: 185px;*/
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
.nav-sidebar .main-nav ul{
    list-style-type: none;
    /*margin: 0;*/
    padding: 0;
}
.nav-sidebar .main-nav ul li{
}
/*.nav-sidebar .main-nav ul li a{
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">

   <div class="col-sm-3 col-md-2 col-lg-2 col-xl-2 nopadding">

      <div class="nav-sidebar">

         <div class="logo">
            <img src="https://i.ibb.co/RQGBXjK/logo.png">
         </div>

         <div class="main-nav">
            <ul>
              <li><a href="#" class="active">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Products</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
         </div>

      </div>

   </div>

   <div class="col-sm-9 col-md-10 col-lg-10 col-xl-10">
   </div>

</div>

center aligning a fixed position div, I've always been able to do it with absolutely positioned divs using this "hack" Share a link to this question Doing this will always keep your fixed div centered on the screen, even div with margin-left: auto and margin-right: auto , or for table make it For example if your side navigation bar is 200px:. You can use any HTML element to open the accordion content. We prefer a button with a w3-block class, to span the entire width of the page (100% width). Remember that buttons in W3.CSS are centered by default. Use the w3-left-align class if you want them left-aligned instead.

"Left centering" the <a> tag inside the li, while leaving the li width at 100%.

body {
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: content-box;
  background: transparent;
}

.container {
  background: transparent;
  width: 100vw;
  height: 100vh;
}

.nav-sidebar {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: grey;
  background: linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0.5)),url(https://i.ibb.co/1TBvfyP/1.jpg);
  border-right: 1px solid #000;
  box-shadow: inset 0px 5px 30px rgba(0,0,0,0.9), 
    0px 10px 15px 5px #000;
  z-index: 9999;
}


.nav-sidebar .logo {
  padding-top: 50px;
  padding-bottom: 7px;
}

.logo img {
  width: 70px;
  height: 70px;
  -webkit-filter: drop-shadow(5px 10px 1px #000);
  filter: drop-shadow(5px 10px 2px #000);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nav-sidebar .main-nav {
  height: 185px;
  margin-top: 40px;
}

.nav-sidebar .main-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-sidebar .main-nav ul li {
  display: flex;
  justify-content: center;
}

.nav-sidebar .main-nav ul li a {
  display: block;
}

I don't know a pure css option for that so here is some jQuery for a quick fix

var li_a_width = 0;

jQuery( '.nav-sidebar .main-nav ul li a' ).each(function(){
  var ce       = jQuery( this ),
      ce_width = ce.width();

  if ( ce_width > li_a_width ) {
    li_a_width = ce_width;
  }
});

if ( li_a_width > 0 ) {
  jQuery( '.nav-sidebar .main-nav ul li a' ).width( li_a_width );   
}

Hope this help =]

CSS: centering things, Sometimes it is not the text that needs to be centered, but the block as a whole. Note that the lines inside the block are not centered (they are left-aligned), unlike A side-effect of making the paragraph absolutely positioned is that it is then� Using “max-width” wasn’t working for some reason (I’m a complete noob on this topic btw) and neither was the center alignment, but the left command had a result, I just set the %. Now the actual links are centered, but the container(?) that the information is in, is not centered and only starts at the center of the page.

Using position: fixed to sidebar and justify-content: center to list elements will fix above issue.

.nav-sidebar {
    position: fixed;
    left: 0;
    padding: 1rem;
}
.nav-sidebar ul li a {
    justify-content: start;
}

Keeping Centered Headers and Footers Centered (Microsoft Word), (Simply double-click in the header or footer area to open it to editing.) Type the text you want left-aligned in the header or footer. Display the� The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.

How to Align and float images with CSS, Aligned images do not wrap text around them. Aligning images will only position the image left, right, or center with the text following before and� This is a better way to center UL's inside of any DIV container. This CSS solution does not use Width and Float properties. Float:Left and Width: 70%, will cause you headaches when you need to duplicate your menu on different pages with different menu items.

How do I get my inbox to show left-aligned?, Update on this. The problem corrected when I refreshed, so was more of a glitch than an accidental change of setting. HTML5 do not support the align tag, Just keep in mind, the usage of style attribute overrides any style set globally. It will override any style set in the HTML <style> tag or external style sheet. For text-align, set the table cell as left, right or center align. Example. You can try to run the following code to center align text in table

Align and justify text in Pages on Mac, In Pages on your Mac, align, center, or justify paragraphs on a page or in a column, table cell, text box, or shape so that text is aligned to the left or right, centered, To apply these changes to all of the paragraphs in your document that use this the Update button next to the paragraph style name at the top of the sidebar. I've had my alignment done by two different shops (a local shop, CMD Automotive, and NTB), both with computerized alignment racks. Afterward, to keep the car straight, the steering wheel is about 20 degrees off center. Both times, I've had the car taken back to the shop and complained. Both shops agreed to do the alignment again, and both times, the steering wheel has remained crooked. I have a h

Comments
  • Hi. Thank you for your answer. Is it possible to achieve this result by keeping .main-nav and ul and li full width of the navbar? I have some styling to do which requires it to be full width.
  • Hi. Thank you for your answer. I didn't know it could be something to mention before but is it possible to achieve this result by keeping .main-nav and ul and li full width of the navbar? I have some styling to do which requires it to be full width.
  • Added some jQuery to achieve what you wanted. Check my edited answer. Hope that help =]
  • Hey thanks for the updated answer. But I'll have to choose the other one cause that's pure css and less complicated.