我有一个主div(#homeGallery),其中我有一个span(.imgClass),用于加载一个图像列表。 我需要图像不仅在垂直方向上居中,而且在div中水平居中。
到目前为止,我有这段代码。
#homeGallery > .imgClass{
margin:auto;
position: relative;
top: 0;
bottom: 0;
display: block;
left: 0;
right: 0;
}
和
#homeGallery > .imgClass > img {
margin:auto;
float:center;
max-width:60%;
max-height:99%;
border: 2px solid;
}
任何帮助将不胜感激
答案 0 :(得分:1)
您可以尝试以下代码: -
#homeGallery > .imgClass > img {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
}
答案 1 :(得分:1)
这是我最近发现的一颗宝石。使用position:absolute与top,left,bottom和right。您可以将横距和垂直居中。
HTML:
<div class="wrapper">
<span class="image"></span>
</div>
CSS:
.wrapper {
width:400px;
height: 400px;
position: relative;
background-color: #afafaf;
}
.wrapper .image {
position: absolute;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
background-color: #000;
}
答案 2 :(得分:0)
您可以尝试以下操作:
#homeGallery > .imgClass > img {
margin:0px auto;
display:block;
max-width:60%;
max-height:99%;
border: 2px solid;
}
答案 3 :(得分:0)
这是Fiddle
#homeGallery .imgClass {
position: relative;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
如果您不知道图像宽度&amp;高度比你可以使用jQuery解决方案
$(function() {
var imgW = $('.imgClass').outerWidth(),
imgH = $('.imgClass').outerHeight();
$('.imgClass').css({ marginLeft: - imgW / 2 + 'px', marginTop: - imgH / 2 + 'px' });
});
和这个CSS
#homeGallery .imgClass {
position: relative;
top: 50%;
left: 50%;
}
答案 4 :(得分:0)
如果你想要一个元素的垂直和水平居中,你应该看看这种方法:
It works in all current browsers and IE8+。
<强> HTML 强>
<div>
<span class="element"></span> <!-- This can be any element -->
</div>
<强> CSS 强>
html, body {
width: 100%;
height: 100%;
display: table;
}
body > div {
display: table-cell;
vertical-align: middle;
}
body > div > .element {
display: block;
margin: 0px auto;
}
如果img
位于span
内div
内的text-align: center
,请使用我上面概述的方法解决这个问题: {{3} }
请注意,我必须更改一些CSS类,以使其与span中的图像很好地协作。我在div
上设置了display: inline-block;
,在span
设置了body > div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
body > div > .element {
display: inline-block;
}
。下面我已经插入了必须更改的完整课程,以使其适合您的情况。
<强> CSS 强>
{{1}}
答案 5 :(得分:0)
这是我首选的方法:
<强> HTML 强>
<div id="homeGallery">
<span class="imgClass">
<span class="fakeImg">You can use whatever img you want here</span>
</span>
</div>
<强> CSS 强>
#homeGallery{
height: 400px;
border: 1px solid #333;
text-align: center;
}
#homeGallery:before{
content: '';
height: 100%;
vertical-align: middle;
display: inline-block;
}
.imgClass{
display: inline-block;
vertical-align: middle;
text-align: left;
background-color: blue;
}
jsfiddle here。
好的一面是这是100%基于CSS的垂直对齐。您不必担心屏幕大小或DOM大小更改。
缺点是它不适用于IE7或更低版本。