欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DIV+CSS垂直居中一個浮動元素

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

場景：在一個固定高度的div中，有一個浮動的元素，需要將這個浮動元素垂直居中。

原始代碼如下:


復(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)在只是簡單的設(shè)置這個button浮動，實現(xiàn)的效果看起來就像這樣：

現(xiàn)在需要將這個button在整個div里垂直居中。我的做法是在這個button外層加一個span，并且浮動這個span元素而不是之前的button。另外需要設(shè)置這個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實現(xiàn)元素居中的N種方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新評論