需要居中對齊圖像在CSS中
[英]Need to center align the image in CSS
問題描述
我試圖在html和css的div框內居中對齊（水平和垂直）圖像。 我無法居中對齊。 這是我的下面的代碼。
<div style="float:left;margin: 10px" >
<div style="border:1px solid gray;width: 60px;height: 60px;text-align:center;">
<img style="max-height: 60px;max-width: 60px;"
src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/>
</div>
</div>
圖像與頂部對齊。 我嘗試在img標簽內使用vertical-align：middle，但這沒有用。
9 個解決方案
解決方案1
8 2012-05-22 14:59:52
來到這篇文章 ，它為我工作：
div{
position: relative;
}
img {
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
}
（垂直和水平對齊）
解決方案2
6 已采納 2010-03-03 10:53:41
<div> <img src="placeholder.gif" width="70" height="120" /> </div>
<div> <img src="placeholder.gif" width="90" height="80" /> </div>
<div> <img src="placeholder.gif" width="70" height="120" /> </div>
div {
float: left;
text-align: center;
width: 150px;
height: 150px;
margin: 5px;
border: 1px solid #ccc;
font-size: 1em;
line-height: 148px;
}
div img {
margin-top: expression(( 150 - this.height ) / 2);
}
html>body div img { /*hidden from IE 5-6 */
margin-top: 0; /* to clean up, just in case IE later supports valign! */
vertical-align: middle;
}
Note: some <script> tag, either inline or external (can be a dummy one), is needed to get IE 5.0 on track.
奇跡般有效。
解決方案3
2 2012-07-11 06:19:10
嘗試在包含圖片的div中使用此樣式。
<style="display: table-cell;
vertical-align: middle;">
解決方案4
1 2010-03-03 10:10:53
使用text-align：center到水平對齊...垂直對齊時沒有css標簽。
解決方案5
1 2010-03-03 10:13:19
<div style="float:left;margin: 10px; height: 199px; width: 242px;text-align:center; vertical-align:middle;" >
<div style="border:1px solid gray;width: 60px;height: 60px;">
<img style="max-height: 60px;max-width: 60px; height: 58px; width: 47px;"
src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/>
</div>
</div>
解決方案6
1 2010-03-03 10:25:39
如果您只想在中間顯示圖片，請嘗試
<div style="background-position: center center; margin: 10px; text-align:center; background-image: url('http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg'); background-repeat: no-repeat;"
class="style1" >
</div>
解決方案7
1 2010-03-03 10:38:25
我通過添加display:table-cell和vertical-align:middle嘗試了自己的解決方案。 在FireFox中工作正常。 但不幸的是在IE中失敗了：(
<div style="border:1px solid gray;width: 60px;height: 60px;display:table-cell; vertical-align:middle;text-align:center;">
<img style="max-height: 60px;max-width: 60px; " src="http://www.google.com/intl/en_ALL/images/logo.gif"/>
</div>
需要一些指針。
解決方案8
1
您應該考慮為此使用vertical-align：middle和text-align：center。 我猜那將解決問題。
解決方案9
0 2012-06-20 17:10:35
使用以下display: inline-block的組合display: inline-block ， text-align: center和vertical-align: middle用於vertical-align: middle兩個尺寸居中：
<!doctype html> <html lang="en"> <head> <style type="text/css"> /* Use 100% height for html and body to provide context for vertical-align */ html, body, .container, .placeholder { height: 100%; } /*Set dimensions of image in CSS */ img { width:16px; height:16px; } /*Vertical centering for the necessary block boxes */ .placeholder, .wrapper, .content { vertical-align: middle; } /* Use inline-block for wrapper and placeholder */ .placeholder, .wrapper { display: inline-block; } /* Inline necessary to use text-align:center */ .content { display:inline; } /* Text align for horizontal centering */ .container { text-align:center; } /* Use width of less than 100% to avoid Firefox 3+ and Webkit wrapping issues */ .wrapper { width: 99%; } /* Media query for IE7 and under */ @media, { .wrapper { display:inline; } } </style> <title>Vertical/Horizontal Centering Test</title> </head> <body> <div class="container"> <div class="content"> <div class="wrapper"> <img src="http://mozilla.com/favicon.ico" alt="test image"> </div> </div> <span class="placeholder"></span> </div> </body> </html>
CSS背景圖片對齊中心
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.