免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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

2024-03-27    分類: 網(wǎng)站建設

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

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

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

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

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

廣告

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

外貿網(wǎng)站建設