Html 如何将侧导航栏上的用户图标移到中心？如何为侧导航栏创建边框？

我试图让用户配置文件图标居中，所以我最难做到这一点。我还尝试在导航栏周围添加边框，这样导航栏就不会显示在我的页面上，我也弄不明白。我正试图重新创造优步所拥有的一切——见附件图片。有人能给我指一下正确的方向吗？谢谢

//从我的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类

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

[！[在此处输入图像描述][1][1]





页面内容

---

Fiddler

可能会添加“显示：flex；调整内容：中心到。配置文件sidenav单元格类将解决您的问题…这真的很有帮助。再次感谢你的帮助！

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