Varun Tewari Varun Tewari - 3 months ago 25
CSS Question

Center the div in the body

I am trying to create a UI for an electron app, This is going to be music player.

My idea is to have the right hand side list music files and the major part of the window display the details of the song being played, like its Album art, Track name, artist and so on. I have got the initial part done but the centering the current song details is not just working for me

Here is the JSfiddle

enter image description here

I need the part where it shows a preview of the album along with the track name and other details be in the

center
of the only
grey
area

Answer

As you are using a flexbox, you should you that to center the grey area using flex: 1;.

To align the green part to the left use justify-content: flex-start and also add margin: 0 to the body to finish it up!

body {
  color: #FFFFFF;
  text-align: center;
  margin: 0;
}
.site-wrapper {
  position: fixed;
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.site-wrapper-inner {
  flex: 1;
}

Let me know your feedback on this. Thanks!

.side-nav {
  height: 100%;
  background-color: #23CF5F;
  color: #FFFFFF;
  overflow-y: auto;
}
a,
a:focus,
a:hover {
  color: #FFFFFF;
}
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333333;
  text-shadow: none;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
html,
body {
  height: 100%;
  background-color: #333333;
}
body {
  color: #FFFFFF;
  text-align: center;
  margin: 0;
}
.site-wrapper {
  position: fixed;
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.site-wrapper-inner {
  flex: 1;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}
.inner {
  padding: 30px;
}
.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px;
}
.masthead-nav > li {
  display: inline-block;
}
.masthead-nav > li + li {
  margin-left: 20px;
}
.masthead-nav > li > a {
  padding-right: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  color: rgba(255, 255, 255, .75);
  border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #a9a9a9;
  border-bottom-color: rgba(255, 255, 255, .25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}
@media (min-width: 768px) {
  .masthead-brand {
    float: left;
  }
  .masthead-nav {
    float: right;
  }
}
/*
 * Cover
 */

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}
/*
 * Footer
 */

.mastfoot {
  color: #999;
  /* IE8 proofing */
  color: rgba(255, 255, 255, .5);
}
/*
 * Affix and center
 */

@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }
}
.wrapper {
  text-align: center;
  max-width: 50%;
}
.glyphicon {
  font-size: 30px;
}
.album-art {
  margin-right: -30px;
}
<body ng-app="music">

  <div class="site-wrapper">
    <div class="col-sm-3 side-nav" ng-controller="ctrl">
      <h3><a href="#" data-toggle="modal" data-target="#myModal">Music</a></h3>
      <hr>
      <div ng-repeat="song in data">
        <p>
          {{ song in data }}
        </p>
      </div>
    </div>
    <div class="col-sm-9 site-wrapper-inner">
      <div class="cover-container">
        <div class="inner cover">
          <div class="container">
            <div class="row">
              <div class="col-sm-12">
                <img src="../assets/sample-art.png" height="150" width="150">
                <br>
                <img src="../assets/sound_bar_dark.gif">
                <h3>Track Name</h3>
                <h5>Artist : Album</h5>
              </div>
            </div>
            <div class="row">
              <div class="wrapper">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Comments