Center divs vertically within another div in boostrap

Question

I'm trying to center some divs within another div for a webapp I'm making. I'm using the bootstrap 3 framework, but cannot get the divs to center vertically.

HTML:

<body>
  <div id="container-main" class="container" align="center" style="min-height:100%">
    <div class="row">
      <div id="player-page-top" class="container">
        <div id="player-page-summoner" class="container-fluid">
          <h1>
                    <img src="http://i.imgur.com/eDeFxAe.png"> Name
                </h1>
          <div id="player-page-ranks">
            <ul class="ul-ranks">
              <li class="ranks">S3 Silver</li>
              <li class="ranks">S4 Gold</li>
              <li class="ranks">S5 Diamond</li>
              <li class="ranks">S6 Master</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div id="player-page-left" class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Leagues
          </div>
          <div class="panel-body">
            Panel content
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            Champion Stats
          </div>
          <div class="panel-body">
            Panel content
          </div>
        </div>
      </div>
      <div id="player-page-right" class="col-md-8">
        <div class="panel panel-default">
          <div class="panel-heading">
            Recent Matches
          </div>
          <div class="panel-body">
            <div class="player-match container-fluid" align="left">
              <div class="championdetails col-md-4">
                <div class="champimage">
                  <img src="http://i.imgur.com/CWlqNvT.png">
                </div>
                <div class="summonerspells">
                  <div class="player-match-spell">
                    <img src="http://i.imgur.com/rTpkXlb.png">
                  </div>
                  <div class="player-match-spell">
                    <img src="http://i.imgur.com/nXFjz2w.png">
                  </div>
                </div>
                <div class="keymastery">
                  <img src="http://i.imgur.com/b5lszzu.png">
                </div>
              </div>
              <div class="score col-md-2">
                <div class="kda .text-center">
                  10 / 7 / 12
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

CSS:

h1,
h2,
h3,
h4,
h5 {
  font-family: "source sans pro", "proxima-nova", sans-serif;
  color: #4b4b4b;
}

@media (min-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

.holder {
  height: 100%;
  width: 100%;
  display: block;
}

.match-middle {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

.player-match {
  border: solid 1px #ddd;
  padding-top: 7px;
  padding-bottom: 7px;
}

.championdetails,
.score {
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
  height: 100%;
}

.summonerspells,
.champimage,
.keymastery {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.player-match-spell {
  display: block;
  margin-bottom: 2px;
}

.summonerspells img,
.keymastery img {
  height: 30px;
  width: 30px
}

.champimage img {
  height: 60px;
  width: 60px;
  border-radius: 40px;
}

#player-page-left,
#player-page-right {
  /*border: 1px solid grey; */
}

#gameplay-baseball-field {
  padding-right: 10px;
  padding-left: 10px;
}

#player-page-top {
  margin: 20px 0 20px 0;
}

#player-page-top img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.ul-ranks>.ranks {
  display: inline-block;
  color: #4b4b4b;
  background: #e0e3e3;
  padding: 0 4px 0 4px;
  margin: 3px 2px 0px 2px;
  border-radius: 4px;
}

.ul-ranks {
  -webkit-padding-start: 0px;
}

JSFiddle

I'm trying to center the "score" and "championdetails" divs vertically inside the "player-match" div. I can't get it to center without it skewing the other divs.

Are you sure you have a css class whose name starts with a `.` (`
`)? — connexo, Nov 20 '16 at 04:48
I haven't got any CSS for that div, but I'm trying to center the div that is around that — A Conway, Nov 20 '16 at 05:12
Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — A1raa, Nov 20 '16 at 13:11

Center divs vertically within another div in boostrap

0 Answers0