CSS盒子模型對齊技巧

日背誦小紙條

字體樣式的對齊方式

垂直居中，設置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

在線咨詢

上一篇：10 個優質的 CSS 與 JS LOGO 動畫示例
下一篇：大廠前端工程師必備能力合輯：響應式設計、CSS動畫

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。