0

我有一个静态图像作为背景启动（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>

这在某些分辨率下可以正常工作，但对于更高的分辨率，“圆角”会一直浮动到尴尬的位置，我如何锁定任何分辨率的位置，即相对于始终根据分辨率居中的启动页面图像？

4

1 回答 1

1

很难将position: absolute指定的元素居中。通过一些技巧，我们可以实现结果，但该解决方案将更多是零散的工作。

在此设置中，将从包含您的背景图像的父级.roundcorner获取其left和。rightcenteredSplash

您可以尝试以下方法：

.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;
}

工作演示

注意：对于在所有屏幕分辨率中保持水平居中的块元素，它必须具有明确指定的宽度，否则margin:0 auto将不起作用。为了垂直居中对齐，我们必须做一些额外的事情，这是另一回事。这是关于 CSS 居中的完整指南。

于 2013-08-06T05:24:36.917 回答