亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

DIV+CSS垂直居中一個(gè)浮動(dòng)元素

  發(fā)布時(shí)間：2014-09-12 10:21:09   作者：佚名   我要評(píng)論
對(duì)于頁(yè)面上的塊級(jí)元素，只須定寬及設(shè)置margin:auto 0;即可在垂直上居中，但對(duì)于浮動(dòng)的元素垂直居中是無效的。那么我們?nèi)绾蝸硖幚磉@個(gè)問題呢，今天我們來探討下。

場(chǎng)景：在一個(gè)固定高度的div中，有一個(gè)浮動(dòng)的元素，需要將這個(gè)浮動(dòng)元素垂直居中。

原始代碼如下:


復(fù)制代碼
代碼如下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper{
width: 400px;
height: 300px;
background-color: #1f8dd6;
}
button{
float: right;
display: inline-block;
height: 50px;
width: 100px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<button>float right.</button>
</div>
</body>
</html>

現(xiàn)在只是簡(jiǎn)單的設(shè)置這個(gè)button浮動(dòng)，實(shí)現(xiàn)的效果看起來就像這樣：

現(xiàn)在需要將這個(gè)button在整個(gè)div里垂直居中。我的做法是在這個(gè)button外層加一個(gè)span，并且浮動(dòng)這個(gè)span元素而不是之前的button。另外需要設(shè)置這個(gè)span的高和行高與外層div相同。


復(fù)制代碼
代碼如下:

span{
    float: right;
    height: 300px;
    line-height: 300px;
}

現(xiàn)在應(yīng)該就變成這樣了：

完整代碼：


復(fù)制代碼
代碼如下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper{
width: 400px;
height: 300px;
background-color: #1f8dd6;
}
span{
float: right;
height: 300px;
line-height: 300px;
}
button{
float: right;
display: inline-block;
height: 50px;
width: 100px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<span>
<button>float right.</button>
</span>
</div>
</body>
</html>

相關(guān)文章

  • css實(shí)現(xiàn)元素居中的N種方法

    這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02

  • css實(shí)現(xiàn)元素垂直居中顯示的7種方式

    這篇文章主要介紹了css實(shí)現(xiàn)元素垂直居中顯示的7種方式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)
    2020-09-04

  • CSS實(shí)現(xiàn)子元素div水平垂直居中的示例

    這篇文章主要介紹了CSS實(shí)現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2020-09-03

  • css 不定寬高的元素居中布局解決方案

    這篇文章主要介紹了css 不定寬高的元素居中布局解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2019-09-18

  • CSS自適應(yīng)布局實(shí)現(xiàn)子元素項(xiàng)目整體居中，內(nèi)部項(xiàng)目左對(duì)齊

    這篇文章主要介紹了CSS自適應(yīng)布局實(shí)現(xiàn)子元素項(xiàng)目整體居中，內(nèi)部項(xiàng)目左對(duì)齊，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們
    2019-09-03

  • css常用元素水平垂直居中方案

    這篇文章主要介紹了css常用元素水平垂直居中方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2019-08-09

  • css實(shí)現(xiàn)元素垂直居中的常用方法(總結(jié))

    本文給大家分享幾種方法介紹css實(shí)現(xiàn)元素垂直居中的常用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-04-01

  • CSS實(shí)現(xiàn)元素居中原理解析

    在 CSS 中要設(shè)置元素水平垂直居中是一個(gè)非常常見的需求了。這篇文章主要介紹了CSS實(shí)現(xiàn)元素居中原理解析，本文分別從行內(nèi)元素和塊級(jí)元素進(jìn)行說明，具有一定的參考價(jià)值，感興
    2018-10-18

  • 利用css設(shè)置元素垂直居中的解決方法匯總

    作為前端攻城師，在制作Web頁(yè)面時(shí)都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，特別的其中的垂直居中，更是讓人煩惱，下面這篇文章主要給大家匯總介紹了關(guān)于
    2017-09-12

  • css實(shí)現(xiàn)元素水平垂直居中常見的兩種方式實(shí)例詳解

    這篇文章主要給大家介紹了css實(shí)現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，有需要的朋友們下面來
    2017-04-23

最新評(píng)論