CSS進(jìn)階篇--CSS讓浮動(dòng)元素水平居中

fevin 發(fā)布于2019-08-28 18:17 / 2992人閱讀

摘要：對(duì)于定寬的非浮動(dòng)元素我們可以用進(jìn)行水平居中。對(duì)于不定寬的浮動(dòng)元素我們也有一個(gè)常用的技巧解決它的水平居中問(wèn)題。

對(duì)于定寬的非浮動(dòng)元素我們可以用 margin:0 auto; 進(jìn)行水平居中。

對(duì)于不定寬的浮動(dòng)元素我們也有一個(gè)常用的技巧解決它的水平居中問(wèn)題。如下：

HTML 代碼：


    我是浮動(dòng)的
    我也是居中的

CSS 代碼：

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

這樣就解決了浮動(dòng)元素水平居中了；

父元素和子元素同時(shí)左浮動(dòng)，然后父元素相對(duì)左移動(dòng)50%，再然后子元素相對(duì)右移動(dòng)50%，或者子元素相對(duì)左移動(dòng)-50%也就可以了。

GPU云服務(wù)器云服務(wù)器 html居中浮動(dòng)元素浮動(dòng)-前端-css html居中css css元素

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111139.html

相關(guān)文章

CSS開(kāi)發(fā)

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

warkiz 2019-08-30 13:54 評(píng)論0 收藏0
CSS及布局

摘要：經(jīng)過(guò)半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來(lái)的微信小程序開(kāi)發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看...

jaysun 2019-08-29 14:04 評(píng)論0 收藏0
CSS 布局經(jīng)典問(wèn)題初步整理

摘要：布局經(jīng)典問(wèn)題初步整理標(biāo)簽前端本文主要對(duì)布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問(wèn)題初步整理標(biāo)簽：前端 [TOC] 本文主要對(duì) CSS 布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

Amos 2019-08-29 12:36 評(píng)論0 收藏0
css常見(jiàn)的各種布局上（兩列布局）

摘要：目錄一大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局博客園為例騰訊課堂個(gè)人中心頁(yè)慕課網(wǎng)個(gè)人中心頁(yè)個(gè)人中心頁(yè)二版的結(jié)構(gòu)三類似九宮格布局的兩列結(jié)構(gòu)四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數(shù)的文字，右側(cè)文字和左邊圖片垂直居中。目錄：一、大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局1、博客園為例2、騰訊課堂個(gè)人中心頁(yè)3、慕課網(wǎng)個(gè)人中心頁(yè)4、github個(gè)人中心頁(yè)二、mini版的nav+cont結(jié)構(gòu)三、類似九宮格...

番茄西紅柿 2019-04-23 11:40 評(píng)論0 收藏0