gpt4 book ai didi

html - 垂直和水平对齐页面内部 DIV 中心

转载 作者:技术小花猫 更新时间:2023-10-29 12:46:10 24 4
gpt4 key购买 nike

<分区>

Possible Duplicate:
Best way to center a <div> on a page vertically and horizontally?

我的网站着陆页有 Container DIV,高度和宽度为 100%。我能够将 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% 的宽度和高度

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com