在另一个div内垂直居中固定大小的div

时间：2017-07-28 09:48:38

标签： html css

我创建了一个小'模板'，包含标题，图像和两个链接。

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

我尝试在display:table上使用plant-inner-col，并在模板上使用display:table-cell，但它会中断图片大小限制，最终占据整个屏幕。

你能不能帮我找到一种垂直居中的方法，而不放弃设置尺寸？

注意：整个事情都使用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>

4 个答案:

答案 0 :(得分：2)

这是你需要的吗？我将.plant-inner-col变成了一个在中心垂直对齐的弹箱。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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>

答案 2 :(得分：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%);
}

答案 3 :(得分：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;
}

检查出来：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

相关问题
最新问题