我有一个静态图像作为背景启动(800x600px),它包含一个特定位置的空白区域,需要填充文本框,此启动页面以所有分辨率为中心(下面的CSS代码)
我可以在特定的屏幕分辨率上正确对齐它,但是当我以不同的分辨率看到它时,框会移出位置。
CSS / HTML:
.centeredSplash {
position:relative;
width:100%;
height:100%;
background:url(Coming-soon.png) center center no-repeat;
}
.roundcorner{
position:absolute;
background-color: #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 15px;
width: 350px;
v-align:top;
/*bottom:34%;*/
bottom : 420px;
right:50%;
margin-right: -190px;
}
input
{
-webkit-border-radius: 5px; //For Safari, etc.
-moz-border-radius: 5px; //For Mozilla, etc.
border-radius: 5px;
float:left;
}
<div class="centeredSplash">
<div class="roundcorner">
<input type="text" style="width:269px;margin-right: 10px" id="email"/>
</div>
</div>
这在某些分辨率下工作正常但是对于更高的分辨率,“圆角”一直漂浮到尴尬的位置,我如何锁定任何分辨率的位置,即相对于始终根据分辨率居中的初始页面图像?
答案 0 :(得分:1)
很难将指定为position: absolute
的元素居中。通过一些黑客行为,我们可以实现结果,但解决方案将更多的是一个不完整的工作。
在此设置中,.roundcorner
将从其父left
和right
中获取包含背景图片的centeredSplash
。
您可以尝试以下操作:
.centeredSplash
{
position:relative;
width:100%;
height:100%;
background:url(Coming-soon.png) center center no-repeat;
}
.roundcorner
{
background-color: #eae53f;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 15px;
width: 400px; /*important*/
margin:0 auto; /*This will keep your box center in all screen resolutions*/
}
input
{
-webkit-border-radius: 5px; / * For Safari, Chrome */
-moz-border-radius: 5px; /* For Mozilla */
border-radius: 5px;
width:100px;
height:20px;
}
<强> Working Demo 强>
注意:要使块元素在所有屏幕分辨率中保持水平居中,必须明确指定一些宽度,否则margin:0 auto
将无效。为了对齐垂直居中,我们必须做一些额外的事情,这是一个不同的故事。这是a complete guide on centering in CSS。