對齊浮動：左div居中？
[英]Aligning a float:left div to center?
問題描述
我想在頁面上水平顯示一組圖像。 每個圖像下面都有幾個鏈接，所以我需要在每個圖像/鏈接組周圍放置一個容器。
我得到的最接近我想要的東西是把它們放在浮動的 div 中：左。 問題是我希望容器對齊中心而不是左對齊。 我怎樣才能做到這一點。
7 個解決方案
解決方案1
228 已采納 2011-04-02 14:12:15
使用display:inline-block; 而不是浮動
您不能將浮動居中，但內聯塊居中就好像它們是文本一樣，因此在“行”的外部整體容器上 - 您可以設置text-align: center; 然后對於每個圖像/標題容器（它是inline-block;容器inline-block; ）如果需要，您可以將文本重新對齊到左側
解決方案2
48 2014-11-24 15:39:17
如今， CSS Flexbox 得到了很好的支持。 去這里獲取一個關於 flexbox 的好教程。
這適用於所有較新的瀏覽器：
#container { display: flex; flex-wrap: wrap; justify-content: center; } .block { width: 150px; height: 150px; background-color: #cccccc; margin: 10px; }
<div id="container"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> <div class="block">5</div> </div>
有些人可能會問為什么不使用 display: inline-block？ 對於簡單的事情，這很好，但是如果塊中有復雜的代碼，則布局可能不再正確居中。 Flexbox 比 float left 更穩定。
解決方案3
9 2011-04-02 14:15:01
像這樣嘗試：
<div id="divContainer">
<div class="divImageHolder">
IMG HERE
</div>
<div class="divImageHolder">
IMG HERE
</div>
<div class="divImageHolder">
IMG HERE
</div>
<br class="clear" />
</div>
<style type="text/css">
#divContainer { margin: 0 auto; width: 800px; }
.divImageHolder { float:left; }
.clear { clear:both; }
</style>
解決方案4
8 2015-05-11 15:46:34
只需將浮動元素包裝在<div>並為其提供以下 CSS：
.wrapper {
display: table;
margin: auto;
}
解決方案5
1 2018-07-11 02:25:03
也許這就是你要找的 - https://www.w3schools.com/css/css3_flexbox.asp
CSS：
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.block {
width: 150px;
height: 150px;
margin: 10px;
}
HTML：
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
解決方案6
-1 2014-02-19 04:41:32
.contentWrapper {
float: left;
clear: both;
margin-left: 10%;
margin-right: 10%;
}
.repeater {
height: 9em;
width: 9em;
float: left;
margin: 0.2em;
position: relative;
text-align: center;
cursor: pointer;
}
解決方案7
-2 2021-03-13 01:00:06
<html>
<head>
<title>Downloads</title>
<style>
.download-container{
width:90%;
margin:0 auto;
text-align:center;
border:0px;
padding:20px;
}
.download-cell{
vertical-align:center;
height:100px;
width:340px;
border:1px solid black;
border-radius:8px;
font-size:24px;
font-color:black;
z-index:2;
margin:20px;
background:white;
color:black;
display:inline-block;
margin:20px;
padding-top:20px;
}
</style>
</head>
<body>
<!--DOWNLOADS-->
<div class="download-container">
<br>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.woocommerce.com">
<img src="Images/woo.png" style="width:60px; height:60px;" />
WooCommerce
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://magento.com">
<img src="Images/magento.png" style="width:60px; height:60px;" />
MAGENTO
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.lightspeedhq.com">
<img src="Images/lightspeed.png" style="width:60px; height:60px;" />
LIGHTSPEED
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.shopify.com">
<img src="Images/shopify.png" style="width:60px; height:60px;" />
SHOPIFY
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://opencart.com">
<img src="Images/opencart.png" style="width:60px; height:60px;" />
OPENCART
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.prestashop.com">
<img src="Images/prestashop.png" style="width:60px; height:60px;" />
PRESTASHOP
</a>
</div>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.wix.com">
<img src="Images/wix.png" style="width:60px; height:60px;" />
WIX eCommerce
</a>
</div>
</div>
</body>
</html>
如何將float = left文本框和按鈕居中放置在float = left div中
[英]How to center float=left textboxes and buttons inside a float=left div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.