gpt4 book ai didi

css - 在特定位置对齐输入框

转载 作者:太空宇宙 更新时间:2023-11-04 14:43:31 25 4
gpt4 key购买 nike

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

这在某些分辨率下工作正常,但对于更高的分辨率,“圆 Angular ”一直 float 到尴尬的位置,我如何锁定任何分辨率的位置,即相对于始终根据分辨率居中的初始页面图像?

最佳答案

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

在此设置中,.roundcorner 将从其父级centeredSplash 获取其leftright 包含你的背景图片。

您可以尝试以下方法:

.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

注意:要使 block 元素在所有屏幕分辨率下保持水平居中,它必须明确指定一些宽度,否则 margin:0 auto 将不起作用。为了垂直居中对齐,我们必须做一些额外的事情,这是另一回事。这是 a complete guide on centering in CSS .

关于css - 在特定位置对齐输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18072103/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com