Question

我正在尝试将一些div放在另一个div中，用于我正在制作的webapp。我正在使用bootstrap 3框架，但无法将div垂直居中。

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

我试图在“玩家匹配”div中垂直居中“得分”和“championdetails”div。我已经尝试过类似问题的答案，但如果没有偏向其他div，我就无法将其置于中心位置。先谢谢

中心在boostrap中的另一个div内垂直划分

0 个答案: