CSS系列之讓元素居中

fou7 發布于2019-08-28 17:55 / 2759人閱讀

摘要：輔助標簽代碼代碼效果廢話要讓元素和輔助元素在一行，否則會出現水平不完全居中，當使用時，換行會被解析成空格。

首先我們需要知道元素都有哪些種類？

內嵌元素（display:inline;）如a，span，b，i 【一個不可定制的盒子】

[默認同行可以繼續跟同類型標簽]
[內容撐開寬度]
[不支持寬高]
[不支持上下的margin和padding]
[代碼換行會被解析成空]

塊元素（display:block;）如div，p，h1-h6

[默認獨占一行顯示]
[基本支持所有的css命令]

行內塊（display:inline-block;）如img 【img就是這么一個神奇的東東。它既不是內嵌又不是塊，而是行內塊】

[塊在一行顯示]
[支持寬高]
[沒有寬度時內容撐開寬度]

那么接下來我們依次將上面三種元素居中

一、內嵌元素之單行文本

最最常見的解決辦法就是使用text-align和line-height

line-height:200px;
text-align:center;

但是這種處理辦法就一定十全十美嗎？我不這么認為（估計有人吐槽我強迫癥了）
反正我每次選中文字看到非文字區也被選中就很不爽，不過IE6-8只會選中文字

二、塊元素居中

解決辦法：使用定位元素+margin負值

width:100px;
height:100px;
position:relative;
left:100px;
top:100px;
margin-left:-50px;
margin-top:-50px;

缺點：要求必須知道盒子的寬高

三、行內塊居中

（1）把img轉化為背景圖片，然后用background-position:center;但是需要注意的是由于圖片的鏈接一般都是經常改變的，所以需要這樣做：

是不是違背了內容樣式分離的原則。

（2）輔助標簽

html代碼：

CSS代碼：

.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}
.box img{vertical-align:middle;border:1px solid #999;padding:2px;}
.box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}

效果：

廢話：要讓img元素和輔助元素span在一行，否則會出現水平不完全居中，當使用inline-block時，換行會被解析成空格。其實網上還有其他辦法，比如說風靡已久的table法。網上一大堆這里就不顯擺了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110886.html

sass筆記-2|Sass基礎語法之讓樣式表更具條理性和可讀性

摘要：這個時候小明如果僅僅引入不想改，那么就是這個值，如果他想改，就可以在任何一處重新聲明這個變量，那么就會變成小明的值。這一篇主要詳述保持sass條理性和可讀性的3個最基本方法——嵌套、導入和注釋。零. 變量變量本身的作用是為了保持屬性值的可維護性，把所有需要維護的屬性值放在同一個地方，快速更改，處處生效，可謂售后無憂。 1.變量聲明變量用$符號開頭進行聲明，任何可以用作CSS屬性...

CloudDeveloper 2019-08-30 13:10 評論0 收藏0
css系列之水平垂直居中

摘要：水平居中水平居中沒有什么好說的啦，對于行內元素使用對于塊級元素使用前提是已經為元素設置了適當的寬度垂直居中單行文本多行文本偽元素行內元素偽元素未知寬高絕對居中絕對定位已知寬高負要考慮兼容性浮動元素垂直居中父元素水平居中水平居中沒有什么好說的啦，對于行內元素使用text-align;對于塊級元素使用margin: auto（前提是已經為元素設置了適當的 width 寬度）; 垂直居中...

MiracleWong 2019-08-29 13:44 評論0 收藏0
《50道CSS基礎面試題（附答案）》中的答案真的就只是答案嗎？

摘要：背景想想自己為什么要寫這個，難道不是因為這篇道基礎面試題附答案文章最近被轉載的多，比較多而湊熱鬧蹭熱點顯然，肯定是因為這樣我才打算寫的。繼承得到的樣式的優先級最低。背景想想自己為什么要寫這個，難道不是因為這篇《50道CSS基礎面試題（附答案）》文章最近被轉載的多，比較多而湊熱鬧蹭熱點？顯然，肯定是因為這樣我才打算寫的。而且還有就是，我的公眾號也很久沒有更新了，微信說長期不更新會關掉...

DataPipeline 2019-08-30 14:11 評論0 收藏0
css揭秘系列

摘要：基于的解決方案借助規范所引入的和屬性，我們可以讓它內部的文本也實現居中根據盒對齊模型第三版的計劃，在未來，對于簡單的垂直居中需求，我們完全不需要動用特殊的布局模式了。因為只需要下面這行代碼就可以搞定 7.結構和布局自適應內部元素: min-content（容器內部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具有固定寬度的盒元素） The great Sir Adam ...

BicycleWarrior 2019-08-29 13:55 評論0 收藏0
【CSS練習】IT修真院--練習4-移動端界面

摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一任務四、一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求：header擴展性 & 頂欄固定進行p...

kun_jian 2019-08-29 15:39 評論0 收藏0