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

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

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

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

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

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

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

廣告

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

外貿(mào)網(wǎng)站建設(shè)