需要在 CSS 中居中对齐图像
Posted
技术标签:
【中文标题】需要在 CSS 中居中对齐图像【英文标题】：Need to center align the image in CSS 【发布时间】：2011-01-23 03:11:40 【问题描述】：我正在尝试将 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 但它没有用。
【问题讨论】：
链接到网站plz :)，然后我可以看到问题。 【参考方案1】：遇到this post，它对我有用：
div
position: relative;
img
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
（垂直和水平对齐）
【讨论】：
【参考方案2】：<div> <img src="placeholder.gif" /> </div>
<div> <img src="placeholder.gif" /> </div>
<div> <img src="placeholder.gif" /> </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.
http://snipplr.com/view/24428/center-an-image-inside-a-div-vertical-and-horizontal-without-knowing-the-images-size/
像魅力一样工作。
【讨论】：
【参考方案3】：尝试在包含图像的 div 中使用此样式。
<style="display: table-cell;
vertical-align: middle;">
【讨论】：
【参考方案4】：使用 text-align:center 水平对齐...垂直对齐中没有 css 标签。
【讨论】：
有一个vertical-align属性。【参考方案5】： <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】：如果你只想在中心显示图像，那么试试这个
<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】：我通过添加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】：您应该考虑为此使用vertical-align:middle 和text-align:center。我猜这将解决问题。
【讨论】：
【参考方案9】：使用display: inline-block、text-align: center 和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" >
</div>
</div>
<span class="placeholder"></span>
</div>
</body>
</html>【讨论】：
以上是关于需要在 CSS 中居中对齐图像的主要内容，如果未能解决你的问题，请参考以下文章