網(wǎng)站制作絕對(duì)定位和inline-block的垂直居中對(duì)齊

2024-03-27 分類：網(wǎng)站建設(shè)

在網(wǎng)站頁(yè)面制作的時(shí)候，很多會(huì)遇到需要做垂直居中的效果，而能做到垂直居中的效果的方式有好多種，今天我想做的這兩種，也非常常用，都可以用于響應(yīng)式的。例如：

如圖，白色方塊需要根據(jù)底圖垂直居中，可以用絕對(duì)定位來(lái)使它居中，首先最外面的div.comp-profile需要設(shè)置position: relative;白色方塊的div.comp-profile-con設(shè)置如下，白色方塊即可垂直居中對(duì)齊。而且絕對(duì)定位必須要設(shè)置高度，而且建議設(shè)置overflow:auto，讓div.comp-profile-con的內(nèi)容超出設(shè)定的高度就要顯示有滾動(dòng)條，否則內(nèi)容多了就會(huì)超出來(lái)，不美觀。
第二種方式是使用inline-block，這種方式的垂直居中是可以變高度且可以適用于響應(yīng)式的。將需要居中的div.comp-profile-con設(shè)置display: inline-block;變成行內(nèi)塊狀元素，然后設(shè)置vertical-align:middle;來(lái)讓它居中對(duì)齊。設(shè)置偽元素：before如下，用于撐開div.comp-profile這個(gè)盒子，div.comp-profile-con就會(huì)按照div.comp-profile的中心位置垂直居中對(duì)齊。如圖。

以上就是關(guān)于網(wǎng)站制作絕對(duì)定位和inline-block的垂直居中對(duì)齊，希望對(duì)你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

文章名稱：網(wǎng)站制作絕對(duì)定位和inline-block的垂直居中對(duì)齊
文章出自：http://www.rwnh.cn/news42/321992.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、域名注冊(cè)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、微信公眾號(hào)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成都競(jìng)價(jià)托管：UC神馬搜索聚焦大數(shù)據(jù)營(yíng)銷 2024-03-27
對(duì)網(wǎng)站建設(shè)發(fā)展的幾點(diǎn)建議 2024-03-27
網(wǎng)頁(yè)設(shè)計(jì)中圖片的使用基本原則 2024-03-27
如何更高效地創(chuàng)造更有價(jià)值的網(wǎng)站內(nèi)容？ 2024-03-27
網(wǎng)站設(shè)計(jì)中網(wǎng)站顏色和字體如何搭配 2024-03-27
用CSS美化之inputfile按鈕 2024-03-27
成都企業(yè)網(wǎng)站建設(shè)公司哪家口碑好？ 2024-03-27

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

網(wǎng)站制作絕對(duì)定位和inline-block的垂直居中對(duì)齊