DIV+CSS教程:段落的对齐方式

 时间:2024-10-13 11:34:11

1、水平对齐设置分为左,中,右和两端对齐。而CSS段落的水平对齐是通过text-align属性来设置。

2、text-align的属性值有4个分别是left; 左对齐right; 右对齐center; 居中对齐justify; 两端对齐

3、通过以下代码看看效果:<html><head> <title>水平对齐</title><style><!--.left{ text-align:left; } /* 左对齐 */.right{ text-align:right; } /* 右对齐 */.center{ text-align:center; } /* 居中对齐 */.justify{ text-align:justify; } /* 两端对齐 */--></style> </head><body> <p class="left"> 百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做",重在解决实际问题。在架构上,整合了百度知道的问题和百度百科的格式标准。 </p> <p class="right"> 百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做",重在解决实际问题。在架构上,整合了百度知道的问题和百度百科的格式标准。 </p> <p class="center"> 百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做",重在解决实际问题。在架构上,整合了百度知道的问题和百度百科的格式标准。 </p> <p class="justify"> 百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做",重在解决实际问题。在架构上,整合了百度知道的问题和百度百科的格式标准。 </p></body></html>运行效果:

DIV+CSS教程:段落的对齐方式

4、在CSS中段落的垂直对齐是通过vertical-align属性来设置。vertical-align属性值有top 顶部对齐,bottom 底部对齐,middle 中间对齐。

5、可以通过以下代码查看效果<html><head争犸禀淫> <title>垂直对齐</title><style><!-幻腾寂埒-.top{ vertical-align:top; } /* 顶部对齐 */.bottom{ vertical-align:bottom; } /* 底部对齐 */.middle{ vertical-align:middle; } /* 中间对齐 */--></style> </head><body><table cellpadding="2" cellspacing="0" border="1"> <tr> <td><img src="baidu.png" border="0"></td> <td class="top">百度经验,top</td> </tr> <tr> <td><img src="baidu.png" border="0"></td> <td class="bottom">百度经验,bottom</td> </tr> <tr> <td><img src="baidu.png" border="0"></td> <td class="middle">百度经验,middle</td> </tr> </table></body></html>运行效果:

DIV+CSS教程:段落的对齐方式
  • css3如何实现一个下三角图案效果
  • 多个列表有隔开的行列怎么做外阴影效果
  • 如何解决1像素边框
  • 用于设置边框粗细的属性为
  • 全国计算机等级考试二级VB:[8]文本框属性
  • 热门搜索
    环境教育手抄报 舌尖上的年味手抄报 手抄报感恩的心 文明安全手抄报 数学手抄报四年级 传染病手抄报 快乐手抄报 以新年为主题的手抄报 关于读书手抄报内容 食品药品安全手抄报