整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
垂直居中，设置line-height和行高相同
水平居中，使用text-align:center
垂直居中
position:absolute; top:50%; transform:translateY(50%);
解决方法1，转化为块状样式
解决方法2，设置对齐方式，vertical-align:top
表格边框合并
table中要设定cellspacing=“0” cellpadding=“0”
然后使用border-collapse:collapse; 将边框合并为1px
实现css两端对齐，我在网上找了很多方法，都不怎么实用，都是兼容性闹得，column是css3的属性，是多列布局，使用column来实现两端对齐简单实用，就要设置下模块的个数跟column的列数一致就行，先看它的的3个属性：
1.column-count 属性规定元素应该被分隔的列数
2.column-gap 属性规定列之间的间隔
2.column-rule 属性设置列之间的宽度、样式和颜色规则。
CSS3 多列属性的兼容性：Internet Explorer 10 和 Opera 支持多列属性，Firefox 需要前缀 -moz-，Chrome 和 Safari 需要前缀 -webkit-，特别注意：Internet Explorer 9 以及更早的版本不支持多列属性。
实现css两端对齐的例子：用column-count定义对象的列数,例子中有4个p（即4个模块），那么就定义为4列，再用column-gap定义了对象中列与列的间距，间距不能设置为百分比，但是只能用px，具体的看下面的代码：
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>实现css两端对齐</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
margin:100px 0;
-webkit-column-count:4;-moz-column-count:4;column-count:4;
-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;
}
.box p{
height:30px;
line-height:30px;
text-align:center;
border:1px solid red;
color:#000;
font-size:12px;
}
</style>
</head>
<body>
<div class="box">
<p>第1列</p>
<p>第2列</p>
<p>第3列</p>
<p>第4列</p>
</div>
</body>
</html>
点击查看css两端对齐效果（http://tangjiusheng.com/css3/column.html）
除注明外的文章,均为来源:汤久生博客,转载请保留本文地址！
原文地址：http://tangjiusheng.com/css3/130.html
出里文字比较多的网页，文字对齐其中采用的两端对齐，两端对齐的方法有三种方法，如下：
1. 使用text-align:justify
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用
/*
说明：
1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify
2.line-height:0 解决标准浏览器容器底部多余的空白
*/
.content{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}
/*
说明：
模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
.content{
font-size:0;
}
}
/*
说明：
1.text-align-last:justify 目前只有IE支持，标准浏览器需要使用 .demo:after 伪类模拟类似效果
2.opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白
*/
.content:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
且子类必须是inline-block元素
-------------------------------------------------------------------------------
2. 使用box-pack:justify
父类容器css:
.content{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
且子类必须是block元素
-------------------------------------------------------------------------------
3. 使用column(多列布局)
/*
说明：
1.column-count定义了对象的列数
2.column-gap定义了对象中列与列的间距
*/
父类容器css:
.content {
-webkit-column-count: 2;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
且子类必须是block元素
文/丁向明
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833
http://dingxiangming.com
*请认真填写需求信息，我们会在24小时内与您取得联系。
