如何居中一個設定了浮動的元素

阿新 • • 發佈：2019-01-03

　　對於一個沒有浮動的元素，我們通常可以通過對其設定margin:0 auto;來實現元素的居中，但是這個方法對於浮動元素卻失去了作用，其實我們可以理解的是，在脫離文件流後，浮動的力量其實就是auto的力量，所以他它會自動向左浮動。

　　那麼，此情此景，應該怎麼樣來實現居中的效果呢？仔細考慮，會有這樣一個方法。

　　首先給此元素設定一個寬度值，先設定它的 margin-left:50%，這個時候元素的左邊緣正好位於其父元素的中央，然後設定其position:relative;left:負本元素寬度的一半，這樣的目的是將本元素向左移動其寬度的一半，這個時候可保證本元素的中間點位於父元素的中央。垂直居中：display: table-cell;vertical-align: middle;

例項程式碼如下：
　　

<!DOCTYPE html>
<html>
<head>
    <title>居中一個浮動元素</title>
    <style type="text/css">
        .content{
            height: 500px;
            width: 500px;
            border: 1px solid red;
            /*垂直居中*/
            display: table-cell;
            vertical-align 
: middle;
        }
        .left{
            height:100px;
            width: 100px;
            border: 1px dashed blue;
            /*水平居中，但設定浮動後失效
            margin: 0 auto;*/
            float: left;
            /*水平居中*/
            margin-left: 50%;
            position: relative;
            left: -50 
px;

        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
    </div>
</body>
</html>

效果如下：
這裡寫圖片描述

如何居中一個設定了浮動的元素

如何居中一個設定了浮動的元素

Web前端面試指導(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?

如何垂直居中一個浮動元素

如何垂直居中一個浮動元素？如何垂直居中一個<img>?

如何垂直居中元素（浮動元素&居中一個<img>）？

如何垂直居中一個浮動元素(未知元素的寬高)

如何居中一個元素（正常、絕對定位、浮動元素）

清理浮動的三種常用方法以及如何居中一個浮動元素

如何居中div？如何居中一個浮動元素？

如何居中一個元素

不固定寬度浮動元素實現水平居中

總結一下各種居中（內聯元素、塊級元素、浮動元素、絕對定位元素）*（水平、垂直）

如何水平居中一個元素

如何垂直居中一個元素

一個例題：浮動引起元素變成行內塊元素-display:inline-block

水平居中設定-行內元素

給元素設定了固定座標後，點選事件失效

【css】子元素浮動到了父元素外，父元素沒有隨子元素自適應高度，如何解決？

CSS設定行內元素和塊級元素的水平居中、垂直居中

HTML 表格元素垂直居中無法設定的問題

如何居中一個設定了浮動的元素

相關推薦