[英]center img with absolute positioning inside div with hidden overflow
I cannot in any way center an image I have inside a parent div with hidden overflow. 我无法以任何方式将父div内具有隐藏溢出的图像居中。 I have been working at this for hours and googling/researching/trying several answers that have been validated by other users, but for some reason they are not helping me.
我已经为此工作了几个小时,并且谷歌搜索/研究/尝试了一些其他用户已经验证过的答案,但是由于某些原因,他们没有帮助我。 I think it may have to do with having several nested classes with different positioning, or may be it has to do with js...but since I can't figure it out I thought I'd ask.
我认为这可能与多个具有不同位置的嵌套类有关,或者可能与js有关...但是由于我无法弄清楚,所以我想问一下。 I have tried left:0 and right:0, I have tried left:-50% with fixed height and other solutions I have found here in stackoverflow with no luck.
我尝试了left:0和right:0,我尝试了left:-50%的高度固定,以及其他我在stackoverflow中发现的运气不好的解决方案。 I would like to solve it with css because I am very new at js, if possible.
我想用css解决它,因为如果可能的话,我在js中是个新手。 Sorry if it sounds like a too common question or a duplicate, but any help will be very appreciated.
很抱歉,如果听起来像是一个太常见的问题或重复的问题,那么我们将不胜感激。 The following is my code:
以下是我的代码:
CSS CSS
div#mosaic {display: block;
margin:0 auto;
width:100%}
.magnifier {overflow:hidden;
position:relative}
.maglens {position: absolute;
overflow: hidden;
width: 3000px;
height: 300px; }
.magsmall {position: absolute;
border-style: none;}
HTML: HTML:
<div id="mosaic">
<div class="magnifier" style="height: 584px; width: 467px; margin: 10px;">
<div class="maglens">
<img id="imgload" src="img/mosaico1.jpg" class="maglarge" alt="mosaico" style="height: 3500px; width: 2800px;" />
</div>
</div>
</div>
EDIT: I finally figured out how to center my image!! 编辑:我终于想出了如何使我的形象居中!! The answer was in this class:
答案在这个班级:
.magnifier {
width:100%;
left:14%;
}
I have no clue why the left % worked (I guess because of the size of my image) but it did. 我不知道为什么剩下的%起作用了(我想是因为图像的大小),但它确实起作用了。 Thank you everyone who took time to help me solve my question, by trying and analyzing your answers I found the solution :)
谢谢大家花时间帮助我解决问题,通过尝试并分析您的答案,我找到了解决方案:)
I think this is what you really need: 我认为这是您真正需要的:
.maglarge{
display:block;
margin:auto;
}
And you should have to get rid of this ridiculously big sizes in order to see it centered, here's a working example: 而且,您必须摆脱这种可笑的大尺寸,才能看到它居中,这是一个有效的示例:
CSS: CSS:
div#mosaic {display: block;
margin:0 auto;
width:100%}
.magnifier {overflow:hidden;
position:relative
width:100%;}
.maglens {position: absolute;
overflow: hidden;
width:100%}
.magsmall {position: absolute;
border-style: none;}
.maglarge{
display:block;
margin:auto;}
HTML: HTML:
<div id="mosaic">
<div class="magnifier">
<div class="maglens">
<img id="imgload" src="img/mosaico1.jpg" class="maglarge" alt="mosaico" />
</div>
</div>
</div>
I used to struggle with this one myself until I found this trick a few months back. 几个月前我发现这个窍门之前,我曾经和这个人挣扎。 Hope it helps!
希望能帮助到你!
.maglens {
position: relative;
}
.maglarge {
position: absolute; // this takes it out of the normal doc flow and ties it to its relative position parent
left: 50%; // left edge of image is now 50% from the left edge of its parent
top: 50%; // top edge of image is now 50% from the top edge of its parent
transform: translate(-50%, -50%); // this is the key for exact centering -- it compensates for the width & height of the image itself
}
As long as your image isn't larger than the parent it's contained in, overflow: hidden shouldn't affect it. 只要您的图像不大于包含在其中的父图像,那么溢出:隐藏不应影响它。
I modified your code. 我修改了您的代码。 To solve your problem, I deleted "maglens" div, I hope it's OK.
为了解决您的问题,我删除了“ maglens” div,希望可以。
CSS: CSS:
div#mosaic {
display: block;
margin:0 auto;
width:100%
}
.magnifier {
overflow:hidden;
position:relative;
}
.magsmall {
position: absolute;
border-style: none;
}
.maglarge {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
HTML: HTML:
<div id="mosaic">
<div class="magnifier" style="height: 584px; width: 467px; margin: 10px;">
<img id="imgload" src="nature.jpg" class="maglarge" alt="mosaico" style="height: 3500px; width: 2800px;"/>
</div>
</div>
This is a helpful document help you dealing with "centering things" in CSS: http://www.w3.org/Style/Examples/007/center.en.html 这是一个有用的文档,可帮助您处理CSS中的“居中事物”: http : //www.w3.org/Style/Examples/007/center.en.html
I finally figured out how to center my image!! 我终于想出了如何使我的形象居中!! The answer was in this class:
答案在这个班级:
.magnifier {
width:100%;
left:14%;
}
I have no clue why the left % worked (I guess because of the size of my image) but it did. 我不知道为什么剩下的%起作用了(我想是因为图像的大小),但它确实起作用了。 Thank you everyone who took time to help me solve my question, by trying and analyzing your answers I found the solution :)
谢谢大家花时间帮助我解决问题,通过尝试并分析您的答案,我找到了解决方案:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.