html - 如何将侧边导航栏上的用户图标移到中央？以及如何为侧边导航栏创建边框？

Question

我正试图让用户个人资料图标居中，所以我很难做到这一点。我还尝试在导航栏周围添加边框，这样它就不会显示在我的页面上，我无法弄清楚。我正在尝试重现 Uber 拥有的东西——见附图。 有人能给我指出正确的方向吗？谢谢!

//来 self 的 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>

//来 self 的 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>

fiddler https://jsfiddle.net/64ccmL0o/3/