Question

这很简单，或者看起来很像，但我无法得到它。

我只是试图始终保持我的表单input centered，并responsive更改window size。

相反，它会保留到left。

以下是html和css代码： -

＆＃13;

    #teaser-input{
    	max-width:100%;
    }
    	#teaser-input input{
    		margin:auto;
    		font-size:2.0em;
    		color:#36393D;
    		text-align:center;
    
    	}

＆＃13;

    <div id="teaser-input">
    	<form>
    		<input type="text" name="email" value="Notify me at: you@provider.com">
    	</form>
    </div><!--teaser-input-->

＆＃13;

Answer 1

我尝试使用CSS技巧，flexbox。如果解决方案是你想要的，你可以。文本框现在根据页面宽度移动。我已经更改了表单的结构，以及<div>现在位于<form>内。

HTML：

<form class="flexbox">
<div class="stretch" >
    <input type="text" name="email" value="Notify me at: you@provider.com">
    </div>
</form>

CSS：

.flexbox { display: flex;  text-align:center; max-width:100%;  }
.flexbox .stretch { flex: 1; }
.flexbox div input {
        width: 50%;
        font-size:2.0em;
        color:#36393D;
        text-align:center;}

https://jsfiddle.net/zkb2627x/1/

Answer 2

我在CSS中为display: block;元素添加了input并且它有效，请参阅：fiddle

此外，您可以调整屏幕大小并进行响应。

Answer 3

使用Flexbox，

justify-content: center;

将精确对齐元素的中心。

＆＃13;

#teaser-input{
    display:flex;
    justify-content:center;
    align-items:center;
}
    #teaser-input input{
        margin:auto;
        font-size:2.0em;
        color:#36393D;
        width:100%;
    }

＆＃13;

<div id="teaser-input">
    <form>
        <input type="text" name="email" value="Notify me at: you@provider.com">
    </form>
</div><!--teaser-input-->

＆＃13;

使输入字段始终居中

3 个答案: