溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關如何讓一個float:left的元素居中的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
第一種方法
<style type="text/css">
.box {
float: left;
width: 100px;
height: 100px;
background: lightcoral;
}
</style>
<body>
<div class="box"></div>
</body>現在它所處的位置 在頁面的最左邊
我們都知道在浮動的情況下添加margin: 0 auto; 是沒有任何效果的。
那么我們在box的外面再套一個div 就是給他一個爸爸 讓他的爸爸處于頁面的正中央
<style type="text/css">
.con {
position: relative;
float: left;
left: 50%;
background: lightblue;
}
.box {
position: relative;
float: left;
left: -50%;
width: 100px;
height: 100px;
background: lightcoral;
}
</style>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>運行代碼 我們得到下面的結果
藍色的con為磚紅色box的“爸爸”，從圖上我們可以很清楚的看到， con通過定位往左移了百分之五十。而box通過相對定位，定位在con的-50%的地方，即為正中心。
給子元素相對定位，是想將相對于父元素來定位自己的位置，float:left讓子元素在同一水平線上顯示，left:-50%是因為子元素的整體寬度就是父元素的寬度，left:50%就是讓子元素內容往相對父元素左上那一點往左移動父元素一半的寬度（right:50%是距右邊50%，效果一樣），正好實現子元素內容居中顯示的效果。
這是引用了別人的話，會更加清晰。
第二種方法
是使用原生JavaScript寫的
<body>
<div id="con" class="box"></div>
<script type="text/javascript">
var con = document.getElementById('con');
con.style.position = 'relative';
con.style.left = (document.body.offsetWidth - con.clientWidth) / 2 + 'px';
</script>
</body>通過獲取屏幕的總寬度 減去box本身的寬度 除以二 便得到了中心的位置。
第三種方法
JQ
<body>
<div class="box"></div>
<script type="text/javascript" src="../js/jquery-1.12.3.js"></script>
<script type="text/javascript">
$('.box').css({
'position' : 'relative',
'left' : ($(window).width() - $('.box').outerWidth()) / 2 + 'px'
})
</script>
</body>和JS的原則是一樣的~
感謝各位的閱讀！關于如何讓一個float:left的元素居中就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
