1. 首页
  2. 问答
  3. 其他div中的垂直中心固定大小div

其他div中的垂直中心固定大小div

2017-07-28 102 views
1

我创建了一个小的“模板”，其中包含标题，图像和两个链接。其他div中的垂直中心固定大小div

我想在页面中垂直居中该模板（类：plant-row），但我无法去做。

我试图在模板上的plant-inner-col和display:table-cell上使用display:table，但是它打破了图像大小的限制，最终取得了整个屏幕。

你能帮我找到一种方法来垂直居中这个盒子，而不放弃设置其大小？

注意：整个事情使用Bootstrap，因此类，但我没有它在这里有很大的影响，因此，我选择保持小提琴简单。

干杯，

.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

回答

2

这是你需要什么？我把.plant-inner-col变成了一个在中心垂直对齐的flexbox。

.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

+0

为什么内容不再修剪？ – SchoolBoy

+0

溢出：为植物行删除隐藏 – Gerard

0

你可以给它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

0

您可以设置相对要居中的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

0

简单只需添加：

.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; 
}

查看结果：

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>

绝对水平和垂直居中在CSS：https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

来源

2017-07-28 10:09:47

相关问题

 相关问题