コンテンツの垂直方向の内側のdiv

-1

私は自分のCSSとブートストラップのスキルを練習しており、真ん中のコンテンツの垂直方向と水平方向のアライメントに固執しています。私はここで何かを逃していると確信していますが、私はそれを見つけることができません。コンテンツの垂直方向の内側のdiv

<div class="container"> 
    <div class="jumbotron"> 
     <h1>Heading here.</h1> 
     <p>Some random text goes here.</p> 
    </div> 
</div> 

<div class="parent container text-center"> 
    <div class="row child text-center"> 
     <ul class="list-inline lis"> 
      <li class="box par"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg"/> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div>

これは私のHTML構造です。

.box { 
     background:#ff6a00; 
     margin:10px; 
     height:200px; 
     width:200px; 

    } 

    li { 
     list-style:none; 
     display:inline; 
     text-align:center; 
    } 
    .lis { 
     height:100vh; 
     width:100%; 
    } 
    .par { 
     display:table; 

    } 
    .ch { 
     display:table-cell; 
     vertical-align:middle; 

    }

liを中央に配置するには、親テーブルの表示と内容の表セル表示を行いました。しかし、そのdoesntは動作するようです。アドバイスはありますか？

出典

2016-07-18 Himakar Reddy

それが既に頼まれたこの質問をチェックしてください：http://stackoverflow.com/questions/35513485/how-to-make-contents-vertical-align-inside-div –

こんにちは、これをチェックしてください。 http://codepen.io/syedrafeeq/pen/aLEqI –

[すべてのブラウザでdivを垂直に配置する方法は？]（http://stackoverflow.com/questions/396145/how-to-vertically-center- a-div-for-all-browsers） – ConfusedShark

.box { 
     background: #ff6a00; 
     margin: 10px; 
     height: 200px; 
     width: 200px; 
    } 

    li { 
     list-style: none; 
     display: inline; 
     text-align: center; 
    } 

    .lis { 
     height: 100vh; 
     width: 100%; 
    } 
    .box{ 
     height: 200px; 
    } 

    .box a { 
     display: block; 
     position: relative; 
     top: 50%; 
     transform: translateY(-50%); 
    }

出典

2016-07-18 10:54:16 Pranjal

.box { 
 
    background:#ff6a00; 
 
    white-space: nowrap; 
 
    vertical-align: top; 
 
    margin:10px; 
 
    height:200px; 
 
    width:200px; 
 
} 
 
.list-inline .box:before { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    margin: 0 0 0 -5px; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    content: ''; 
 
    width: 1px; 
 
} 
 

 
li { 
 
    list-style:none; 
 
    display:inline; 
 
    text-align:center; 
 
} 
 
.lis { 
 
    height:100vh; 
 
    width:100%; 
 
} 
 
.ch { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    white-space: normal; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="jumbotron"> 
 
     <h1>Heading here.</h1> 
 
     <p>Some random text goes here.</p> 
 
    </div> 
 
</div> 
 

 
<div class="parent container text-center"> 
 
    <div class="row child text-center"> 
 
     <ul class="list-inline lis"> 
 
      <li class="box par"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg"/> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

出典

2016-07-18 11:03:28

コンテンツの垂直方向の内側のdiv

答えて

関連する問題