특정 위치에 입력 상자 정렬

Question

정적 이미지가 배경 시작 (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> 

이 특정 resoltuions에서 잘 작동하지만, 더 높은 해상도에 대해 "roundcorner은"나는 시작에 상대적 즉 어떤 해상도의 위치를 ​​고정 할 수있는 방법, 어색한 위치에 부동 유지 페이지 이미지는 해상도에 따라 항상 중심에 배치됩니까?

Answer 1

position:absolute을 지정하여 항상 가운데에 맞추기가 어렵습니다. 몇몇 해킹에 의해 우리는 그것을 달성 할 수 있지만, 그 해결책은 더 많은 일들이 될 것입니다.

.roundcorner은 의 배경 이미지를 포함하는 부모로부터 left 및 right을 가져옵니다.

이 시도 할 수 있습니다 ..

.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, etc. 
    -moz-border-radius: 5px; //For Mozilla, etc. 
    border-radius: 5px; 
    width:100px; 
    height:20px; 
} 

이가 Working Demo입니다.

참고 : 블록 요소가 모든 화면 해상도에서 중앙에 유지되도록하려면 너비와 높이를 지정해야합니다. 그렇지 않으면 margin:0 auto이 작동하지 않습니다. 희망 도움 :