时间戳

首页 > 解决方案 > 无法左对齐侧边栏链接，使其居中

html - 无法左对齐侧边栏链接，使其居中

问题描述

我正在开发链接垂直居中的导航栏。我一直在努力实现的是使所有链接左对齐，即所有链接都应该从左边开始，但保持它们居中。

正如您从片段中看到的那样，链接居中（我想要），但没有任何对齐。我希望链接从同一行开始。像这样的东西：

Home
About Us
Products
Contact Us

但应该以导航栏为中心。

这是我试过的代码：

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>

我怎样才能做到这一点？如果有人可以帮助有需要的菜鸟，那就太好了。

标签： htmlcss

解决方案

将标签“左居中”在<a>li 内，同时将 li 宽度保持为 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;
}

我不知道纯 css 选项，所以这里有一些 jQuery 用于快速修复

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 );   
}

希望这有帮助=]

推荐阅读