请教一下CSS中的float:浮动属性的具体运用的问题 - ASP技术论坛

已结贴√ 问题点数：20 回复次数：3

请教一下CSS中的float:浮动属性的具体运用的问题

初学CSS,自己写了一代码:不能达到效果,

代码如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS样式演示</title>
</head>
<style  type="text/css">

</style>
<body  bgcolor="#ffffff" >

<p> <h1 style="float: left ; ">想垂直方向居中<br><br></h1> </p>
<p>第2行显示内容
<br>
第3行显示内容
<br >
第4行显示内容</p>
</body>
</html>
现在显示的效果不能满意

图片附件: 游客没有浏览图片的权限，请登录或注册

请高手指点一下,如何再让字体最大的一段居于右边3行字的垂直方向的中间,(我也不想将几段文字就放在单元格TD中去控制)最好是直接在我的代码中修改一下,新手, 谢谢!!

搜索更多相关主题的帖子: html　PUBLIC　content　background　head　

第 2 楼

得分:0

以下是引用yms123在2012-2-21 19:12:23的发言：

#MainDiv
{
     width:715px;
     height:65px;
     background-color:#FF0;
}
#div1
{
     width:357px;
     height:65px;
     float:left;/*让div水平平铺的关键*/
     line-height:65px;/*单行文本垂直居中就是让这个值(行高)等于高度*/
     text-align:center;/*文本水平居中*/
     font-family:"宋体";
     font-size:35px;
     color:#000;
}
#div2
{
     width:357px;
     height:65px;
     font-size:22px;
     line-height:20px;
     font-family:"宋体";
     color:#000;
     text-align:left;
     float:left;/*每个水平平铺div必须加*/
}


   垂直居中的文字

     第1行的内容

     第2行的内容

     第3行的内容



以上代码在IE9下测试正常

第 3 楼

得分:0

版主是利用了层DIV，但我很想知道我的错在哪？？从中吸取经验，谢谢

第 4 楼

得分:0

line-height:65px;/*单行文本垂直居中就是让这个值(行高)等于高度*/
然后:
垂直居中只跟高度有关系，要么像我写的那个代码行高等于高度这样会垂直居中
这一句话有点不太理解...那为什么有些标签还要有vertical-align:middle 这个属性呢?而在这里又不用去设置这个属性(我设置过,也没有用,所以也不太很明白)

请版主再详解一下...谢谢!!