垂直整列のインラインブロック要素

したがって、CSSの基本を学び、依然としてかなり単純なものに苦しんでいます。 divをインラインブロックのディスプレイに垂直にセンタリングします。私はvertical align: middle;を試しました。垂直整列のインラインブロック要素

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
    width: 100vw; 
 
    min-height: 580px; 
 
    text-align: center; 
 
    background-color: white; 
 
    vertical-align: middle; 
 
} 
 

 
#logo { 
 
    display: inline-block; 
 
    height: 50vh; 
 
    width: 50vh; 
 
    background-color: red; 
 
}

<div id="container"> 
 

 
    <div id="logo"></div> 
 

 
</div>

出典

2017-03-23 Paul

多分margin-top：auto;を試してみてください。 margin-bottom：auto; –

この例を参照してください。https://codepen.io/edge0703/pen/iHJuA – Abi

例を参照してくださいfiddle

が、これは100％と設定コンテナの高さを助けCSS

#logo { 
    position: absolute; 
    left:50%; 
    top:50%; 
    margin:-25vh 0vh 0vh -25vh; 
}

出典

2017-03-23 11:47:23

希望を追加します。

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#logo { 
 
    height: 50vh; 
 
    width: 50vh; 
 
    background-color: red; 
 
}

<body> 
 

 
    <div id="container"> 
 
    <div id="logo"></div> 
 

 
    </div>

出典

2017-03-23 11:50:27

単に表示本部センターの

text-align:center

それとも

display: block; 
margin: auto;

を使用しています。 enter link description here

出典

2017-03-23 12:21:17

垂直整列のインラインブロック要素

答えて

関連する問題