css3總結之居中

mist14 發布于2019-04-23 13:26 / 1343人閱讀

摘要：居中在前端布局上很常見，也很常用，也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中，垂直居中和水平垂直居中。針對調整的元素不同，具體的處理方式上有些差異。這里我們先不講絕對定位下的居中，絕對定位下的居中方法很多，變化也多。

　　居中在前端布局上很常見，也很常用，也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中，垂直居中和水平垂直居中。

　　針對調整的元素不同，具體的處理方式上有些差異。這里我們先不講絕對定位下的居中，絕對定位下的居中方法很多，變化也多。下面講的都是非絕對定位下的方法，原則上有兩個，一個是常用，另外一個是兼容性最好。

水平居中是居中效果中最常見的，最常用的方法莫過于下列兩種：

HTML：

<div class="box">薛定諤的喵！div>

1、text-align center

.box {
　　text-align: center;
}

2、定寬元素 margin: 0 auto;

.box {
    width: 96px;
    margin: 0 auto;  
}

結果自然不言而喻，都是居中的，

如果是對于文本的水平居中更傾向于第一點，因為在第二點上壓根就不好計算文本的寬度，即使計算會有小許的誤差，雖然對文字兼容性上不是很好，卻很適合于按鈕或者是寬度固定的塊狀元素，

反過來需要說明的是第一點也不單單是對文字有效，而是對內聯（inline-XX）元素都有效，這個我們可以看

GPU云服務器云服務器 css3 css3氣泡 css3動畫 JS+CSS3

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

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

總結：前端開發中讓元素水平垂直居中的方法

摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 評論0 收藏0
總結：前端開發中讓元素水平垂直居中的方法

摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

douzifly 2019-08-29 17:17 評論0 收藏0
前端面試之CSS總結(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0