0

i am trying to create a website dashboard similar to this IMG

My Goal is to have 5 Buttons with Icons aligned in the middle of the sidebar like in the example. I have seen a post already similar to my problem but it doesnt seem to solve mine. this is the Thread with an similar issue. I've Created a CodePen with my base Layout.

Index.html

<div class="Sidebar">
  <ul class="Sidebar-Icon">    
   <li><a href="javascript:void(0)" <i class="fa fa-home SDIcon" aria-hidden="true"></i></a></li>
   <li><a href="javascript:void(0)" <i class="fa fa-square-o SDIcon" aria-hidden="true"></i></a></li>
  <li><a href="javascript:void(0)" <i class="fa fa-cloud SDIcon" aria-hidden="true"></i></a></li>
  <li><a href="javascript:void(0)" <i class="fa fa-circle-o SDIcon" aria-hidden="true"></i></a></li>
  <li><a href="javascript:void(0)" <i class="fa fa-heart-o SDIcon" aria-hidden="true"></i></a></li>
 </ul>
</div>

style.css

html {
      position: relative;
      min-height: 100%;
}
.Sidebar {
          position: fixed;
          background-color: #15191C;
          width: 90px;
          top: 0;
          left: 0;
          bottom: 0;
          overflow-y: auto;
          z-index: 999;
          -webkit-transition: left 300ms;
          -o-transition: left 300ms;
          transition: left 300ms;
         }
 .Sidebar-Icon .SDIcon {
                        color: #fff;
                       }
 .Sidebar-Icon li {
                   list-style-type: none;
                  }

Can somebody explain me please what kind of styling im looking for? i couldnt find any useful threads or guides.

Vezh
  • 120
  • 2
  • 9
  • 1
    Your CodePen example appears to already have five buttons displayed vertically in a sidebar. Can you please clearly state how your example differs from what you're trying to achieve? Do you just want them aligned in the middle of the page vertically? – Obsidian Age Dec 13 '17 at 01:38
  • exactly. i want them in the middle of the sidebar aligned – Vezh Dec 13 '17 at 01:41

3 Answers3

1

In order to vertically center your sidebar items, I'd recommend making use of the flexbox layout.

All you have to do is add display: flex along with align-items: center to your .Sidebar class.

This can be seen in the following:

html {
  position: relative;
  min-height: 100%;
}

.Sidebar {
  position: fixed;
  background-color: #15191C;
  width: 90px;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 999;
  -webkit-transition: left 300ms;
  -o-transition: left 300ms;
  transition: left 300ms;
  display: flex;
  align-items: center;
}

.Sidebar-Icon .SDIcon {
  color: #fff;
}

.Sidebar-Icon li {
  list-style-type: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="Sidebar">
  <ul class="Sidebar-Icon">
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-home SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-square-o SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-cloud SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-circle-o SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-heart-o SDIcon" aria-hidden="true"></i></a>
    </li>
  </ul>
</div>

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
1

I slightliy altered your CSS - the trick is to center the ul vertically within the page and then offset it so that it is centered. I also added some padding to ul li's so that they are spaced out a bit. 

    html {
     position: relative;
     min-height: 100%;
      }
      .Sidebar {
     position: fixed;
     background-color: #15191C;
     width: 90px;
     top: 0;
      left: 0;
     bottom: 0;
     overflow-y: auto;
     z-index: 999;
     -webkit-transition: left 300ms;
     -o-transition: left 300ms;
     transition: left 300ms;
      }
    
    .Sidebar-Icon {
        position: fixed;
        top: 50%;
        left: 3%;
        transform: translate(-50%, -50%);
        transform: -webkit-translate(-50%, -50%);
        transform: -moz-translate(-50%, -50%);
        transform: -ms-translate(-50%, -50%);  
        text-align:center
    }
    
    .Sidebar-Icon .SDIcon {
       color: #fff;
      }
    .Sidebar-Icon li {
      list-style-type: none;
      padding-bottom: 10px 
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="Sidebar">
  <ul class="Sidebar-Icon">
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-home SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-square-o SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-cloud SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-circle-o SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-heart-o SDIcon" aria-hidden="true"></i></a>
    </li>
  </ul>
</div>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
0

I would also recommend flexbox: http://flexboxfroggy.com/

This is a site that shows you the commands for flexbox. It will be a well-invested 1/2 hour of your time. Besides your current task, you will be able to use it for future tasks.

code beginner
  • 285
  • 3
  • 14