中央にグリッドを垂直に配置しますか？

Question

センターに垂直に配置するにはどうすればよいですか？

<div class="ui-grid-b"> 
    <div class="ui-block-a">Block A</div> 
    <div class="ui-block-b">Block B</div> 
    <div class="ui-block-c">Block C</div> 
</div> 

Answer 1

vertical-alignプロパティを使用します。

div[class|=ui-grid] { 
    background: red; 
    text-align: center; 
    padding: 30px; } 
div[class|=ui-block] { 
    background: blue; 
    font: 10px Verdana; 
    color: #fff; 
    padding: 10px; 
    vertical-align: middle; 
    display: inline-block; } 
.ui-block-a { height: 100px; } 
.ui-block-b { height: 50px; } 
.ui-block-c { height: 200px; } 

div[class|=ui-grid]とdiv[class|=ui-block]attribute selectorを使用しています。

プレビュー：グリッドまたは単にブロックhttp://jsfiddle.net/Wexcode/LzuYR/