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

網(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)

外貿(mào)網(wǎng)站建設(shè)
嘉兴市| 正定县| 个旧市| 宜春市| 冕宁县| 买车| 图木舒克市| 左贡县| 岗巴县| 罗定市| 庐江县| 临漳县| 项城市| 阜南县| 金寨县| 玛曲县| 海晏县| 筠连县| 浦城县| 保靖县| 闽清县| 师宗县| 麻江县| 乃东县| 西和县| 广水市| 方城县| 兴海县| 黄石市| 台中市| 克什克腾旗| 吕梁市| 防城港市| 逊克县| 广灵县| 新巴尔虎右旗| 攀枝花市| 白水县| 三亚市| 彩票| 科技|