CSS實(shí)現(xiàn)圖片與文本的居中對(duì)齊的常見方式

CNZPH 發(fā)布于2019-08-30 15:55 / 3341人閱讀

摘要：為圖片和文本都設(shè)置這是一段文本通過彈性布局實(shí)現(xiàn)，外層容器設(shè)置彈性布局，通過設(shè)置交叉軸居中對(duì)齊這是一段文本借助于背景圖片實(shí)現(xiàn)，這時(shí)只需要文本居中即可這是一段文本圖片與文本左浮動(dòng)，同時(shí)設(shè)置容器元素

1.為圖片和文本都設(shè)置vertical-align：middle



Page Title


    
    這是一段文本

2.通過彈性布局實(shí)現(xiàn)，外層容器設(shè)置彈性布局，通過align-items: middle設(shè)置交叉軸居中對(duì)齊



Page Title


    
    這是一段文本

3.借助于背景圖片實(shí)現(xiàn)，這時(shí)只需要文本居中即可



Page Title


    
    這是一段文本

4.圖片與文本左浮動(dòng)，同時(shí)設(shè)置容器元素的line-height



Page Title


    
    這是一段文本

最終效果：

屏幕剪輯的捕獲時(shí)間: 2018/10/11 23:37

5.文本設(shè)置為行內(nèi)塊，圖片垂直居中對(duì)齊



Page Title


    
    這是一段文本

云服務(wù)器 GPU云服務(wù)器圖片html居中對(duì)齊 html文本的對(duì)齊常見的數(shù)據(jù)存儲(chǔ)方式 html的圖片居中

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

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

相關(guān)文章

vertical-align屬性與垂直居中

摘要：方法二利用，設(shè)置元素結(jié)構(gòu)，并應(yīng)用實(shí)現(xiàn)垂直居中，這種方法的實(shí)現(xiàn)可用于多行文本，要求及以上版本。讓元素居中對(duì)齊是非常常見的需求，首先是水平居中，要實(shí)現(xiàn)水平居中行內(nèi)元素只需要在其父元素上設(shè)置text-align: center即可，對(duì)于塊級(jí)元素來說讓它的margin-left: auto和margin-right: auto即可（width不可為auto），那么垂直居中呢？找下css屬性發(fā)...

bergwhite 2019-08-28 18:11 評(píng)論0 收藏0
《CSS世界》筆記三：內(nèi)聯(lián)元素與對(duì)齊

摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的，而頭疼不已。上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞寫在前面在頁面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的1px，2px而頭疼不已...

HtmlCssJs 2019-08-29 16:19 評(píng)論0 收藏0
前端基礎(chǔ)入門二（CSS）

摘要：輸入的時(shí)候少按一個(gè)鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 評(píng)論0 收藏0
【CSS基礎(chǔ)】CSS常見問題

摘要：常見的布局兩列布局兩欄布局一欄定寬，一欄自適應(yīng)，自適應(yīng)的一欄作為內(nèi)容主體。三列布局三列布局也是經(jīng)常使用到的一種布局，它的特點(diǎn)是兩邊兩列固定，中間自適應(yīng)。左右兩欄使用屬性，中間欄使用屬性。垂直居中單行文本垂直居中父元素高度為auto 一個(gè)父元素如果不設(shè)置高度的話，默認(rèn)就是緊包裹著子元素，如果父元素設(shè)置的pading-top和padding-bottom相同，這本身就是一個(gè)垂直居中效...

villainhr 2019-08-30 14:06 評(píng)論0 收藏0
主流的CSS水平和垂直居中技術(shù)大全

摘要：水平居中行內(nèi)元素的水平居中在父元素中設(shè)置只對(duì)內(nèi)聯(lián)元素或行內(nèi)塊元素有效需要放置于父元素中塊級(jí)元素的水平居中只對(duì)塊級(jí)元素有效指的是自適應(yīng)寬度。參考張鑫旭實(shí)現(xiàn)絕對(duì)定位元素的居中及原理居中方式水平居中垂直居中塊級(jí)元素設(shè)置內(nèi)聯(lián)元素設(shè)置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個(gè)月也零零散散學(xué)...

KoreyLee 2019-08-29 16:26 評(píng)論0 收藏0