Question

我找到了一个片段，用于在CSS中制作一个盒子网格。这看起来很棒，但我似乎无法弄清楚两件事。

1）如何控制盒子的高度？在尝试设置height: 100px;时，它会被忽略。

2）如何确保盒子的内容放在盒子的中间？我已经尝试了所有的东西，但没有运气......我正在考虑水平和垂直方向的中间位置......

这是HTML;

  <div id="wrapper">
  <div id="wrap">
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
  </div>
  </div>

这是CSS;

#wrapper {
      width: 60%;
      margin: auto;
    }   
    #wrap {
      overflow: hidden;
    }
    .box {
      width: 25%;
      padding-bottom: 25%;
      color: #CC0000;
      position: relative;
      float: left;
      -moz-border-radius: 10px; 
      border-radius: 10px; /* standards-compliant: (IE) */
    }
    .innerContent {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 5px;
      bottom: 5px;
      background: #FFFFFF;
      padding: 10px;
      -moz-border-radius: 10px 10px 10px 10px;
      border-radius: 10px 10px 10px 10px; /* standards-compliant: (IE) */
    }
    .innerContent:hover {
      background: #999999;
    }

Answer 1

这是您要找的东西：https://jsfiddle.net/76mywz8j/

根据您的目标浏览器，您可以使用

display: flex;
align-items: center;

另外，您可能需要考虑从position: absolute开始.innerContent{}。

我还将背景颜色从.innerContent{}移动到.box{}（悬停状态现在定义在.box而不是.innerContent{}）。这允许你按照你想要的方式设置盒子;通过“简化”.innerContent{}上定义的样式，相对于其容器的位置变得更容易。

其他一些建议：使用简写为border-radius。并且您不需要在border-radius和.box{}上定义.innerContent{}。

Answer 2

如果你想要变量高度，试试吧。

#wrapper {
              width: 100%;
              margin: auto;
            }   
            #wrap {
              overflow: hidden;
            }
            .box {
              width: 25%;
              color: #CC0000;
              float: left;
              -moz-border-radius: 10px; 
              border-radius: 10px; /* standards-compliant: (IE) */
              margin:auto;
              text-align:center;
            }
            .innerContent {
              background: #FFFFFF;
              padding: 10px;
              -moz-border-radius: 10px 10px 10px 10px;
              border-radius: 10px 10px 10px 10px; /* standards-compliant: (IE) */      
              padding:40px 0px;
                    
            }
            .innerContent:hover {
              background: #999999;
            }

 <div id="wrapper">
  <div id="wrap">
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
    <div class="box">
      <div class="innerContent">
        This is the content.
      </div>
    </div>
  </div>
  </div>

CSS网格;将内容放在中心

2 个答案: