如何將側邊導航欄上的用戶圖標放到中心？以及如何創建側邊導航欄的邊框？

Question

我試圖讓用戶配置文件圖標居中，所以我最難做到這一點。我也嘗試在導航欄中添加邊框，這樣它就不會顯示在我的頁面上，我無法弄清楚。我正在嘗試重新創建優步所具有的功能 - 請參閱圖片。 請人指點我正確的方向？謝謝！

//從我的HTML頁面

 <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-2"> 
[![enter image description here][1]][1] 
      <!-- side bar --> 
       <div class="row"> 
       <div class="profile-sidenav-cell"> 
        <span class="glyphicon glyphicon-user custom-icon"></span> 
       </div> 
       </div> 

       <div class="row"> 
       <div class="profile-sidenav-cell"> 
       <ul class="side-menu-tabs"> 
        <li><a href="/profile">Profile</a></li> 
        <li><a href="#">Trips</a></li> 
        <li><a href="/logout">Log Out</a></li> 
       </ul> 

       </div> 
       </div> 
      <!-- side bar end --> 
      </div> 


      <div class="col-sm-10" style="background-color: green;">Page Content</div> 
     </div> 
     </div> 

//從我的CSS頁面

.profile-sidenav-cell{ 
    position: relative; 
    background-color: #eee; 
    margin: 0px 0px 0px 20px; 
} 

.profile-sidenav-div { 
    background-color: purple; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    height: 100px; 
    width: 100px; 
} 

.custom-icon { 
    font-size: 70px; 
    background: white; 
    padding: 30px; 
    border-radius:100%; 
    border:0.5px solid #ccc; 
    color:#ccc; 
    box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.25); 
    display:table-cell; 
    width:100%; 
    height:100%; 
} 

.profile-sidenav-cell ul { 
    margin: 0px; 
    padding: 0; 
    list-style-type: none; 
} 

.profile-sidenav-cell ul li a { 
    text-decoration: none; 
    color: gray; 
    padding: 11px 11px 10px; 
    background-color: white; 
    display:block; 
} 

.profile-sidenav-cell ul li a:visited { 
    color: gray; 
} 

.profile-sidenav-cell ul li a:hover, .side-menu-tabs ul li .current { 
    color: white; 
    background-color: gray; 
} 

Answer 1

替換此css類

.custom-icon { 
    font-size: 70px; 
    background: white; 
    padding: 30px; 
    border-radius:100%; 
    border:0.5px solid #ccc; 
    color:#ccc; 
    box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.25); 

} 
.profile-sidenav-cell ul li a { 
    text-decoration: none; 
    color: gray; 
    padding: 11px 11px 10px; 
    background-color: white; 
    display:block; 
    text-align:left; 
} 

和HTML

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-2 text-center"> 
[![enter image description here][1]][1] 
      <!-- side bar --> 
       <div class="row"> 
       <div class="profile-sidenav-cell"> 
        <span class="glyphicon glyphicon-user custom-icon"></span> 
       </div> 
       </div> 

       <div class="row"> 
       <div class="profile-sidenav-cell"> 
       <ul class="side-menu-tabs"> 
        <li><a href="/profile">Profile</a></li> 
        <li><a href="#">Trips</a></li> 
        <li><a href="/logout">Log Out</a></li> 
       </ul> 

       </div> 
       </div> 
      <!-- side bar end --> 
      </div> 


      <div class="col-sm-10" style="background-color: green;">Page Content</div> 
     </div> 
     </div> 

提琴手https://jsfiddle.net/64ccmL0o/3/