css+div怎么对齐？

div+css对齐分两种情况一种是：文字对齐；另一种是区域块儿设置浮动，让他们浮动，而实现出来的效果即是对齐；如下演示：

1、文字实现居对齐

网页中实现效果：如下图：

详解：主要属性：text-align:left;使文字实现居左对齐  

扩展：text-align:right; 使文字靠右对齐，center文字居中；

2、区域块儿设置浮动实现对齐；div+css如下：

网页中效果图：如下：

详解：设置一个大的区域nav，里面包含两个部分区域块，nav1与nav2，使他们在nav中靠左浮动；主要标签：float:left; 靠左浮动；

扩展：float:right;靠右浮动；而与之相关标签： clear:both;则是去除左右浮动； clear:left;去除左浮动 clear:right;清除右浮动

<div class="duiq"><ul>
<li><a href="#">连衣裙</a></li>
<li><a href="#">T恤</a></li>
<li><a href="#">衬衫</a></li>
<li><a href="#">雪纺衫</a></li>
<li><a href="#">连衣裙</a></li>
<li><a href="#">头文字</a></li>
<li><a href="#">文字文字</a></li>
<li><a href="#">雪纺衫</a></li>
</ul></div>
<style>
duiq{ width:250px; border:1px solid #ccc; padding:5px;}
duiq li{ float:left; width:60px; height:30px; line-height:30px; text-align:center;}
ul,li{ padding:0; margin:0;}
a{ font-size:14px; color:#333; text-decoration:none;}
</style>

这种可以实现对齐

最主要还是看你想怎么排版

下面是表格做的  你看下哪一个更适合你用

<table width="250" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>文字信</td>
    <td>文字息</td>
    <td>文字息</td>
    <td>文字息</td>
  </tr>
  <tr>
    <td>文字息</td>
    <td>文信息</td>
    <td>文字息</td>
    <td>文字息</td>
  </tr>
</table>
<style>td{ height:30px; line-height:30px; text-align:center;}</style>

使文字在div中水平和垂直居中的的css样式为

text-align:center; /水平居中/
line-height: 20px; /行距设为与div高度一致/

示例如下：

HTML元素

<div>水平垂直居中</div>

css样式

div{
width:200px;height:200px;  /设置div的大小/
border:1px solid green;    /边框/
text-align: center;        /文字水平居中对齐/
line-height: 200px;        /设置文字行距等于div的高度/
overflow:hidden;
}

显示效果

可以通过使用text-align: justify;样式实现文本两端对齐，来让三个字和两个字对齐。
text-align 有一个属性值为 justify，为对齐的意思。其实现的效果就是可以让一行文字两端对齐显示(文字内容要超过一行)。

div里面的文字底部对齐可以通过设置如下css样式实现
1
2
display:table-cell;
/按照单元格的样式显示元素/
vertical-align:bottom;
/底对齐/
举个例子：
创建html元素
1
文字在div的底部对齐
添加css样式
1
2
3
4
5
div{
width:200px;height:50px;
/设置div的大小/
border:4px
solid
#beceeb;
/为了便于观察，显示出边框/
display:table-cell;
vertical-align:bottom;
显示效果

---