私のウェブサイトのランディング ページにはContainer
、高さと幅が 100% の DIV があります。InnerContainer
div を水平方向の中央に揃えることはできますが、垂直方向の中央に配置することはできません。いくつかのプロパティを変更しましたが、ほとんど結果は変わりません。
http://jsfiddle.net/cwkzq/12/と同じ例があり、どこで間違っているのかわかりません。これについて助けていただければ幸いです。
CSS コード
html, body,form { height: 100%; }
body { margin: 0; padding: 0; border: 1; background-color:Aqua; }
.Container { width: 100%;height: 100%; padding: 0; font-size: 12px; border:1px solid green;
vertical-align: middle; }
.InnerContainer
{ vertical-align: middle; width: 400px;height: 350px; border-left:1px solid;
border-right:1px solid; border-color:#f5f5f5;margin: 0 auto; padding: 0;
font-size: 12px; background-color:Red;
}
HTMLコード
<!-- Container -->
<div class="Container">
<div class="InnerContainer">
<!-- TopMenu Bar -->
<div class="colorBar">
</div>
<!-- TopMenu Bar -->
<!-- Middle Part -->
<div class="MiddleWrapper">
<!-- Left Title -->
<div class="Title">
</div>
<!-- Left Title -->
<!-- Large Image -->
<div class="ImageLeftWrapper">
</div>
<!-- Large Image -->
<!-- Logo Wrapper -->
<div class="LogoWrapper">
</div>
<!-- Logo Wrapper -->
<!-- Page Text Area -->
<div class="PageText">
</div>
<!-- Page Text Area -->
<!-- Search Bar -->
<div class="SearchBar">
</div>
<!-- Search Bar -->
<!-- Banner Images -->
<div class="BannerImageWrapper">
</div>
<!-- Banner Images -->
</div>
<!-- Middle Part -->
<!-- Menu Wrapper -->
<div class="MenuWrapper">
</div>
<!-- Menu Wrapper -->
<!-- Footer Section -->
<div class="FooterWrapper">
</div>
<!-- Footer Section -->
</div>
</div>
<!-- Container -->
ネット上のほとんどすべての例では、幅と高さのコンテナー DIV が固定されていますが、私の場合、コンテナー div の幅と高さは 100% です。