CSS進階篇--CSS讓浮動元素水平居中

fevin 發布于2019-08-28 18:17 / 2982人閱讀

摘要：對于定寬的非浮動元素我們可以用進行水平居中。對于不定寬的浮動元素我們也有一個常用的技巧解決它的水平居中問題。

對于定寬的非浮動元素我們可以用 margin:0 auto; 進行水平居中。

對于不定寬的浮動元素我們也有一個常用的技巧解決它的水平居中問題。如下：

HTML 代碼：


    我是浮動的
    我也是居中的

CSS 代碼：

.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}

這樣就解決了浮動元素水平居中了；

父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對右移動50%，或者子元素相對左移動-50%也就可以了。

云服務器 GPU云服務器 html居中浮動元素浮動-前端-css html居中css css元素

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

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

CSS開發

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

warkiz 2019-08-30 13:54 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
css常見的各種布局上（兩列布局）

摘要：目錄一大結構上的導航欄和內容區域兩欄布局博客園為例騰訊課堂個人中心頁慕課網個人中心頁個人中心頁二版的結構三類似九宮格布局的兩列結構四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數的文字，右側文字和左邊圖片垂直居中。目錄：一、大結構上的導航欄和內容區域兩欄布局1、博客園為例2、騰訊課堂個人中心頁3、慕課網個人中心頁4、github個人中心頁二、mini版的nav+cont結構三、類似九宮格...

番茄西紅柿 2019-04-23 11:40 評論0 收藏0