Verticle％で1つの行に3つのDivとテキストを整列

Question

私は6つのDIVを持っています。私は3つ続けていきたいです。私はそれらを「反応性/タブレット型」に友好的にし、また簡単なモバイルビューにしようとしています。各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 link