對齊浮動div中的圖像中心

我有一個循環來加載浮動div塊中的徽標圖像，我已經嘗試從stackoverflow的幾個提示，但沒有運氣，使徽標對齊中心和div中的中間，所有徽標高度都不固定和可能有不同的高度爲每個：對齊浮動div中的圖像中心

<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;"> 
    <img width="78px" align="left" src="images/logo/logo1.jpg">  
</div>

請幫助，謝謝。

來源

2013-07-15 conmen

你試過這個：http://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div。此外，僅供參考，您可能想將您的樣式放入CSS類和文件中。這有助於消除HTML，並且在進入響應式設計時特別有用，並且可以根據不同的顯示應用不同的樣式 –

-1

爲什麼你沒有設置圖像中心的對齊？那麼你的代碼應該是：

<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;"> 
<img width="78px" align="center" src="images/logo/logo1.jpg">

而且我認爲這也是圖像寬度VS股利塊的比例問題+它的填充和邊框。嘗試設置它的平衡。

來源

2013-07-15 03:06:41 codelop

不要使用align屬性。這個屬性正在被弄糊塗。 – hungerstar

如果你想獲得它在div裏面的中間，你有沒有嘗試過：

<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;"> 
     <img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">  
    </div>

我用「保證金左：50％的margin-top：50％;」在IMG標籤內，擺脫了「對齊」和「浮動」屬性。在這種情況下，我可能不想使用「對齊」。無論哪種方式，我希望它有幫助。

來源

2013-07-15 03:11:57 user2403316

我想你試圖把DIV放在中心位置，而不是上面的圖像。 – hungerstar

我剛編輯它，你是對的。現在它在中間INSIDE div – user2403316

使用'margin-left：50％;'將圖像的左側推到DIV的中間，同時'margin-top：50％;'將圖像的頂部推到中間的DIV。這不是它的中心。這將圖像的左上角放在包含DIV的中間。 – hungerstar

如果您還沒有這樣做，您應該將您的CSS移出style屬性，並將其移入style.css之類的文件。但是，如果你真的需要，你可以把下面的代碼放到你現在有的內聯樣式中。

從圖像標記中刪除align="left"屬性，並將圖像的顯示設置爲block。這將允許margin: 0 auto;將您的圖像置於包含DIV的中間。

看起來你必須用CSS複製<table>才能獲得你想要的垂直居中。表格單元格允許垂直居中。要做到這一點，我已經添加了一個.container類別的DIV。DIV將其顯示設置爲table，並且.image-container DIV作用類似於表格單元格，它的顯示設置爲table-cell。

CSS

.container { 
    float: left; 
    width: 80px; 
    height: 80px; 
    padding: 8px; 
    border: 1px solid #ccc; 
    display: table; 
} 
.image-container { 
    display: table-cell; 
    vertical-align: middle; 
} 
.image-container img { 
    display: block; 
    margin: 0 auto; 
}

HTML

<div class="container"> 
    <div class="image-container"> 
      <img src="images/logo/logo1.jpg"> 
    </div> 
</div>

的jsfiddle：http://jsfiddle.net/MJ5j4/

來源

2013-07-15 03:23:21 hungerstar

它將水平居中放置圖像，但不是垂直放置，與「text-align：center」相同 –

@anku_radhey您是對的。我已經更新了我的答案。 – hungerstar

圖像被或多或少顯示爲直列塊。所以你可以在容器div的樣式上設置text-align: center;。

讓東西在中間垂直對齊與CSS複雜。如果您打算使用JavaScript動態地放置徽標，您可以節省麻煩，並通過使用JavaScript指定邊距來垂直居中。

看看這個演示：http://jsfiddle.net/jyvFN/1/

HTML

<div id="container"> 
    <img id="logo" src="http://placekitten.com/100/100" /> 
</div>

CSS：

#container { 
    float: left; 
    background-color: blue; 
    width: 200px; 
    height: 150px; 
    text-align: center; 
    border: 1px solid red; 
}

的JavaScript

var logo = document.getElementById('logo'); 
var container = document.getElementById('container'); 
var margin = (container.clientHeight - logo.clientHeight)/2; 
logo.style.marginTop = margin + "px"; 
logo.style.marginBottom = margin + "px";

來源

2013-07-15 03:35:55

只需要創建一個類「centerImgWrapper」，幷包裹所有你的」中心「圖像中的任何地方與div的圖像。

那是純CSS

.centerImgWrapper { 
width: 100%; 
height: 100%; 
position: relative; 
overflow: hidden;} 

.centerImgWrapper img { 
left: 0; 
right:0; 
top: 0; 
bottom:0; 
max-height: 100%; 
max-width: 100%; 
margin:auto; 
position:absolute; 
}

只是檢查出的小提琴。 MyFiddle

戴夫大波

來源

2014-11-21 10:19:15 DaveM

使用的定位。以下爲我工作...

變焦到圖像的中心（圖像填充DIV）：

div{ 
     float:left; 
     display:block; 
     overflow:hidden; 
     width: 70px; 
     height: 70px; 
     position: relative; 
    } 
    div img{ 
     min-width: 70px; 
     min-height: 70px; 
     max-width: 250%; 
     max-height: 250%;  
     top: -50%; 
     left: -50%; 
     bottom: -50%; 
     right: -50%; 
     position: absolute; 
    }

沒有放大的圖像的中心（圖像不不填寫div）：

div{ 
     float:left; 
     display:block; 
     overflow:hidden; 
     width: 100px; 
     height: 100px; 
     position: relative; 
    } 
    div img{ 
     width: 70px; 
     height: 70px; 
     top: 50%; 
     left: 50%; 
     bottom: 50%; 
     right: 50%; 
     position: absolute; 
    }

來源

2016-03-24 08:48:43 FinkAvenue

對齊浮動div中的圖像中心

回答

相關問題