这个小提琴演示了我的问题:http://jsfiddle.net/pn04dsvq/
对于500px以下的视口,我需要使用transform: scale
顶部的图像。但是由于某些原因,在应用缩放后,图像保持在右侧。我希望图像水平放在中间。
我已经测试了底部文本的transform: scale
功能,并设法保持在中间位置。你知道如何在顶部的图像中实现这一目标吗?
在某些论坛上,我发现了transform-origin
属性,当我将transform-origin: left;
添加到图片容器时,它会将图片保留在左侧,但是当我添加transform-origin: center;
时没有任何区别。
请注意,我只需要在图片上使用transform: scale
功能。根据视口大小使图像响应不适用于我的应用程序。非常感谢。
HTML代码:
<div id="grey-bar">
<div id="image-container">
<img src="http://www.refugeeweek.org.uk/Resources/RefugeeWeek2012/Images/CounterpointsArts3.bmp">
</div>
</div>
<h3 id="main-heading">How can I make the image above to stay in the middle after the 'transform: scale' is applied for viewports below 500px? For some reason it stays on the right.</h3>
<div id="grey-bar">
<div id="bottom-heading-container">
<h1 id="bottom-heading">This sentance stays in the middle after the 'transform: scale' is applied.</h1>
</div>
</div>
CSS:
div#grey-bar {
width:100%;
margin-left:auto;
margin-right:auto;
padding-top:30px;
padding-bottom:30px;
background-color:grey;
}
div#image-container {
width:100%;
margin-left:auto;
margin-right:auto;
text-align: center;
}
@media screen and (max-width:500px) {
div#image-container {
max-width:100%;
margin-left:auto;
margin-right:auto;
text-align: center;
transform: scale(0.5);
}
}
h3#main-heading {
max-width:728px;
text-align:center;
margin-left:auto;
margin-right:auto;
color:grey;
}
div#bottom-heading-container {
width:100%;
margin-left:auto;
margin-right:auto;
text-align: center;
}
@media screen and (max-width:500px) {
div#bottom-heading-container {
max-width:100%;
margin-left:auto;
margin-right:auto;
text-align: center;
transform: scale(0.5);
}
}
h1#bottom-heading {
max-width:728px;
text-align:center;
margin-left:auto;
margin-right:auto;
color:white;
}
答案 0 :(得分:0)
在我的Firefox上,您所描述的问题发生了。 我建议添加&#39; center&#39;标签来解决它:
<center> </center>
然后它按预期显示在我的Firefox中心。
由于您希望img以容器为中心,因此它应如下所示:
<div id="image-container">
<center>
<img/>
</center>
</div>
为了使它兼容较新的html5和较旧的html解析器,你最好保持两个&#34; center&#34;标签和&#34; text-align&#34; ATTR。 上面的代码显示如下: