Question

我正在导航链接垂直居中的导航栏上。我一直试图实现的是使所有链接都左对齐，即所有链接应从左侧开始，但保持居中。

从片段中可以看到，链接居中（我想要），但是没有任何对齐。我希望链接从同一行开始。像这样：

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>

我该如何实现？如果有人可以帮助有需要的菜鸟，那就太好了。

Answer 1

将li内的<a>标签“居中”，同时将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 );   
}

希望此帮助=]

Answer 2

请参阅CSS。我已经注释掉了您拥有的许多样式，并添加了一些样式以更好地显示效果。满足您需求的主要代码如下：

.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>

更新

也可以这样：

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

.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 {
  width: 60%;
  margin: 0 auto;
  display: block;
}

<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>

Answer 3

使用位置：固定在侧边栏上，并证明内容：在列表元素的中心将解决上述问题。

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

无法左侧对齐侧边栏链接，使它们居中

3 个答案:

更新