| asp.net中页面Div层内部的控件在垂直方向没法居中问题的解决办法 |
| 来源：
发布时间：2008-09-02 发布人：
浏览：
人次
字体：
[大
中
小]
|
|
这个网站因为要动态生成页面所以就考虑到了用div来布局，本人对css不熟，最讨厌的就是Div内部的控件在垂直方向没法居中，其解决办法就是使用 padding-top与padding-bottom大小相等，并且padding-top + padding-buttom + height为实际Div高度，具体看以下实例吧。
<style type="text/css">
.layout
{
margin:0px auto; //页面内居中
width: 1024px;
font-size: 10pt;
}
.half
{
float: left; //为了让两个div并列放置
width: 49%; //如果是50%两个div就没法并列放在一行上，不知道有没有更好的解决方法
}
.single
{
width: 98%;
}
.left
{
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 30px;
width: 175px;
text-align: right;
padding-right: 10px;
line-height: 30px; //与height大小相等，用于文字垂直居中
}
.right
{
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
padding-left: 10px;
background-color:White ;
height: 24px; //没有width属性，自适应宽度
padding-top: 3px;
padding-bottom: 3px;
line-height: 24px;
}
使用代码：
<form id="form1" runat="server">
<div class="layout">
<div class="half">
<div class="left"><asp:Label ID="Label1" runat="server" Text="左边" Height="20px"></asp:Label></div>
<div class="right"></div>
</div>
<div class="half">
<div class="left"><asp:Label ID="Label2" runat="server" Text="右边"></asp:Label></div>
<div class="right"></div>
</div>
<div class="layout">
<div class="single"><div class="left">左边</div><div class="right"><asp:TextBox ID="TextBox3"
runat="server" Width="300px" ></asp:TextBox></div></div>
</div>
<div class="layout">
<div class="half"><div class="left">
</div><div class="right"></div></div>
<div class="half"><div class="right">代码含义</div></div>
</div>
</div>
</form>
| |
| |
|
|
|
|
| §最新评论:（评论内容只代表网友观点，与本站立场无关！） | |
|
|
|
|
| 注意:请勿在本站发布政治话题、色情及违反法律的内容。 |
IT知道网 声明：刊登此文章是为了传递更多信息，文章内容仅供参考，转载请注明出处。 |
