他のdivの中に垂直に中心固定サイズのdiv

タイトル、画像、2つのリンクを含む小さな「テンプレート」を作成しました。他のdivの中に垂直に中心固定サイズのdiv

私はこのテンプレート（クラス：plant-row）をページ内に垂直に配置したいと思っていますが、私はそれを行うことができません。

plant-inner-colのdisplay:tableとテンプレートのdisplay:table-cellを使用しようとしましたが、画像サイズ制限が壊れて画面全体が表示されてしまいました。

サイズをあきらめることなく、このボックスを垂直に中央に配置する方法を見つける手助けをしてください。

注：すべてがブートストラップを使用しているため、クラスがありますが、私はここに大きな影響を与えません。したがって、私は簡単なフィドルを保つことに決めました。

乾杯、

.kpi-homepage-container{ 
 
    margin-left:0px; 
 
    margin-right:0px; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    position:fixed; 
 
    background-color: #f5f5f5; 
 
    width:100%; 
 
} 
 
.plant-col { 
 
    height: 100%; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
} 
 

 
.plant-inner-col { 
 
    height: 100%; 
 
    padding-left: 7.5px; 
 
    padding-right: 7.5px; 
 
    float: none; 
 
    margin: 0 auto; 
 
} 
 

 
.plant-row { 
 
    box-sizing: border-box; 
 
    box-shadow: 1px 1px 1px; 
 
    height: calc((100% - 35px)/2); 
 
    text-align: center; 
 
    border: 1.5px solid; 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
} 
 

 
.plant-row .plant-name { 
 
    font-size: 18px; 
 
    padding-top: 5px; 
 
} 
 

 
.plant-row .plant-img { 
 
    height: 70%; 
 
} 
 

 
.plant-row .plant-link { 
 
    height: 15%; 
 
    margin-top: 10px; 
 
}

<div class="kpi-homepage-container"> 
 
    <div class="col-md-12 plant-col"> 
 
    <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;"> 
 
     <div class="col-md-6 plant-inner-col"> 
 
     <div class="plant-row"> 
 
      <p class="plant-name">HMD</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg"> 
 
      <div class="row plant-link"> 
 
      <div class="col-md-6"><a class="btn btn-primary" href="#">To Level 0</a></div> 
 
      <div class="col-md-6"><a class="btn btn-info" href="#">To Level 1</a></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-07-28 Maxime

これは何が必要ですか？私は.plant-inner-colを中心に垂直に整列されたフレックスボックスに変えました。

.kpi-homepage-container{ 
 
    margin-left:0px; 
 
    margin-right:0px; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    position:fixed; 
 
    background-color: #f5f5f5; 
 
    width:100%; 
 
} 
 
.plant-col { 
 
    height: 100%; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
} 
 

 
.plant-inner-col { 
 
    height: 100%; 
 
    padding-left: 7.5px; 
 
    padding-right: 7.5px; 
 
    float: none; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.plant-row { 
 
    box-sizing: border-box; 
 
    box-shadow: 1px 1px 1px; 
 
    height: calc((100% - 35px)/2); 
 
    text-align: center; 
 
    border: 1.5px solid; 
 
    border-radius: 2px; 
 
    width: 100%; 
 
} 
 

 
.plant-row .plant-name { 
 
    font-size: 18px; 
 
    padding-top: 5px; 
 
} 
 

 
.plant-row .plant-img { 
 
    height: 70%; 
 
} 
 

 
.plant-row .plant-link { 
 
    height: 15%; 
 
    margin-top: 10px; 
 
}

<div class="kpi-homepage-container"> 
 
    <div class="col-md-12 plant-col"> 
 
    <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;"> 
 
     <div class="col-md-6 plant-inner-col"> 
 
     <div class="plant-row"> 
 
      <p class="plant-name">HMD</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg"> 
 
      <div class="row plant-link"> 
 
      <div class="col-md-6"><a class="btn btn-primary" href="#">To Level 0</a></div> 
 
      <div class="col-md-6"><a class="btn btn-info" href="#">To Level 1</a></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-07-28 09:57:13 Gerard

はなぜコンテンツはもはやクリップされていませんか？ – SchoolBoy

オーバーフロー：プラントローの隠しが削除されました – Gerard

あなたはそれをposition: relative;、top: 50%;とtranform: translateY(-50%);を与えることができます。

これは、要素の上端を中央に持ち上げ、それを上半分の高さに変換します。

は

.kpi-homepage-container{ 
 
    margin-left:0px; 
 
    margin-right:0px; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    position:fixed; 
 
    background-color: #f5f5f5; 
 
    width:100%; 
 
} 
 
.plant-col { 
 
    height: 100%; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
} 
 

 
.plant-inner-col { 
 
    height: 100%; 
 
    padding-left: 7.5px; 
 
    padding-right: 7.5px; 
 
    float: none; 
 
    margin: 0 auto; 
 
} 
 

 
.plant-row { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    box-shadow: 1px 1px 1px; 
 
    height: calc((100% - 35px)/2); 
 
    text-align: center; 
 
    border: 1.5px solid; 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.plant-row .plant-name { 
 
    font-size: 18px; 
 
    padding-top: 5px; 
 
} 
 

 
.plant-row .plant-img { 
 
    height: 70%; 
 
} 
 

 
.plant-row .plant-link { 
 
    height: 15%; 
 
    margin-top: 10px; 
 
}

<div class="kpi-homepage-container"> 
 
    <div class="col-md-12 plant-col"> 
 
    <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;"> 
 
     <div class="col-md-6 plant-inner-col"> 
 
     <div class="plant-row"> 
 
      <p class="plant-name">HMD</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg"> 
 
      <div class="row plant-link"> 
 
      <div class="col-md-6"><a class="btn btn-primary" href="#">To Level 0</a></div> 
 
      <div class="col-md-6"><a class="btn btn-info" href="#">To Level 1</a></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-07-28 09:55:56 SchoolBoy

あなたは、あなたが上部オフセットを設定し、その後、相対的にあなたがセンタリングしたいのdivの位置を設定することができます。

.plant-row { 
    box-sizing: border-box; 
    box-shadow: 1px 1px 1px; 
    text-align: center; 
    border: 1.5px solid; 
    border-radius: 2px; 

    /* code to center vertically */ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

出典

2017-07-28 10:01:49

シンプルなだけ追加します。

.plant-row { 
    box-sizing: border-box; 
    box-shadow: 1px 1px 1px; 
    height: calc((100% - 35px)/2); 
    text-align: center; 
    border: 1.5px solid; 
    border-radius: 2px; 
    overflow: hidden; 
    margin:auto; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

これをチェックアウト：

CSSで

body 
 
{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.kpi-homepage-container{ 
 
    width:100%; 
 
    height:100%; 
 
    margin:auto; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    
 
    background-color: #f5f5f5; 
 
} 
 
.plant-col { 
 
    height: 100%; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
} 
 

 
.plant-inner-col { 
 
    height: 100%; 
 
    padding-left: 7.5px; 
 
    padding-right: 7.5px; 
 
    float: none; 
 
    margin: 0 auto; 
 
} 
 

 
.plant-row { 
 
    box-sizing: border-box; 
 
    box-shadow: 1px 1px 1px; 
 
    height: calc((100% - 35px)/2); 
 
    text-align: center; 
 
    border: 1.5px solid; 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
    margin:auto; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
} 
 

 
.plant-row .plant-name { 
 
    font-size: 18px; 
 
    padding-top: 5px; 
 
} 
 

 
.plant-row .plant-img { 
 
    height: 70%; 
 
} 
 

 
.plant-row .plant-link { 
 
    height: 15%; 
 
    margin-top: 10px; 
 
}

<div class="kpi-homepage-container"> 
 
    <div class="col-md-12 plant-col"> 
 
    <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;"> 
 
     <div class="col-md-6 plant-inner-col"> 
 
     <div class="plant-row"> 
 
      <p class="plant-name">HMD</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg"> 
 
      <div class="row plant-link"> 
 
      <div class="col-md-6"><a class="btn btn-primary" href="#">To Level 0</a></div> 
 
      <div class="col-md-6"><a class="btn btn-info" href="#">To Level 1</a></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

絶対水平方向と垂直方向のセンタリング：https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

出典

2017-07-28 10:09:47

他のdivの中に垂直に中心固定サイズのdiv

答えて

関連する問題