垂直对齐文本与三个Div在一行与百分比

Question

我有六个div。我想要连续三个。我试图让它们"响应/平板"友好，也方便移动视图。每个div将包含一个使用span/icon的字形图标。如何使文本垂直居中?如何让div在比标准平板电脑尺寸更小的设备上放一行呢?

@media only screen and (min-width: 768px) {
.one,.two, .three, .four, .five, .six{
   float: none;
}
.one{
    background-color:#323232;
}
.two{
    background-color:#2775EC;
}
.three{
    background-color:#800000;
}
.four{
    background-color:#00899f;
}
.five{
    background-color:#a500ac;
}
.six{
    background-color:#009000;
}
.one, .two, .three, .four, .five, .six{
    float:left;
    width:33.33%;padding-bottom:25%;
    border: #ffffff solid 4px;
    transition: all .15s ease-in-out;
    z-index:0;
    color:#ffffff;
    text-align:center;
}
.one:hover, .two:hover, .three:hover, .four:hover, .five:hover, .six:hover {
    background-color: #ffffff;
    color: #ffffff;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}}

   <div class="container" style="width:100%">
   <div class="one"><span class="glyphicon glyphicon-search" style="font-size:52px">One</span></div>
   <div class="two">here two</div>
   <div class="three">here three</div>
   <div class="four">here four</div>
   <div class="five">here five</div>
   <div class="six">here six</div>

Answer 1

确保正确缩进代码。你的代码中有一些语法错误。在你的html中，你缺少一个容器元素的结束div标签。在CSS中，您没有正确关闭媒体断点。

我对你的代码做了一些修改，希望对你有帮助。

HTML

<div class="container">
  <div class="one">One</div>
  <div class="two">here two</div>
  <div class="three">here three</div>
  <div class="four">here four</div>
  <div class="five">here five</div>
  <div class="six">here six</div>
</div>

CSS

  @media only screen and (max-width: 768px) {
    .one,
    .two,
    .three,
    .four,
    .five,
    .six {
      float: none;
    }
  }
  .one {
    background-color: #323232;
  }
  .two {
    background-color: #2775EC;
  }
  .three {
    background-color: #800000;
  }
  .four {
    background-color: #00899f;
  }
  .five {
    background-color: #a500ac;
  }
  .six {
    background-color: #009000;
  }
  .one,
  .two,
  .three,
  .four,
  .five,
  .six {
    float: left;
    width: 50vh;
    height: 50vh;
    line-height: 50vh;
    border: #ffffff solid 4px;
    color: #ffffff;
    text-align: center;
  }
  .one:hover,
  .two:hover,
  .three:hover,
  .four:hover,
  .five:hover,
  .six:hover {
    background-color: #ffffff;
    color: #ffffff;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
  }

Codepen链接