收货单在边框里方法
方法一：可以使用fieldset（缺点不兼容老版本的ie）
<fieldset>
<legend>收货单</legend>
<p>内容</p>
</fieldset>
方法二：可以使用定位position:relative;来实现
<div><span class="title">我是边框上的文字</span><span>我是边框内的文字</span></div>2设置css样式
div{
width:200px;
height:100px;
padding:5px 30px;
margin:50px;
border:4px solid #ebcbbe;
}
spantitle{
display:block;
width:150px;
height:30px;
position:relative;
top:-15px;
text-align: center;
background: white;
}<style type="text/css">
{margin:0;padding:0;}
div1{width:300px;height:200px;overflow:hidden;text-align:left;border:1px solid #000;margin:50px;}
div1 table{width:100%;height:100%;}
</style>
<div class="div1">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="middle">
<td>文字水平,垂直居中,可以换行(换行后能左对齐,而不是水平居中就更好 了),div具有固定高度和左浮动,超出div的文字隐藏,只需要在ie9及以上,火狐,谷歌实现就可以了</td>
</tr>
</table>
</div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">方法如下：
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p {
height:30px;
line-height:30px;
width:100px;
overflow:hidden;
}
这段代码可以达到效果。
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
p {
padding:30px;
}可以，外面再加一个框体，把5个DIV框起来
<div style="margin:0 auto;width:1500px; background-color:#999999; padding:10px;">
<div style="float:left;width:300px; background-color:#FF6600"></div>
<div style="float:left;width:300px; background-color:#FF6600"></div>
<div style="float:left;width:300px; background-color:#FF6600"></div>
<div style="float:left;width:300px; background-color:#FF6600"></div>
<div style="float:left;width:300px; background-color:#FF6600"></div>
</div>
我测试过，文字居中简单再加一个样式就可以了：text-align:center
<div style="margin:0 auto;width:1500px; background-color:#999999; padding:10px;">
<div style="float:left;width:300px; background-color:#FF6600; text-align:center"></div>
<div style="float:left;width:300px; background-color:#FF6600; text-align:center"></div>
<div style="float:left;width:300px; background-color:#FF6600; text-align:center"></div>
<div style="float:left;width:300px; background-color:#FF6600; text-align:center"></div>
<div style="float:left;width:300px; background-color:#FF6600; text-align:center"></div>
</div>给这个td定义一个高度，然后把它的lineheight定义为这个高度，这样就保证垂直居中，
水平居中的话：td div {margin:0px auto;}
如果还想要这个div里面的文字也居中，就是：td div {margin:0px auto; text-align:center;}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）