Question

我不确定此Q是否得到了回答。请告知是否有使用CSS的方法，我可以实现将Form元素居中居中，当用户尝试调整页面大小时，对我来说，元素应始终被重新设置为页面大小。

我需要使用CSS而不是通过JS来实现这一点。

Answer 1

要使表单元素水平居中，随着浏览器窗口变得越来越宽，随着浏览器窗口越来越薄，表单元素越来越薄，您可以使用CSS来实现。但是，您需要将其包含在水平居中的位置。

在我的例子中，我使用了表单元素本身来进行水平居中。

form { width: 50%;
    margin: 0 auto; }
form textarea, 
form input { width: 100%; }

Answer 2

基于setek答案，您可以使用min-width，max-width和calc

<form action="#" method="get">
    <textarea cols="40" rows="5"></textarea>
    <input type="text" name="given-name" />
    <input type="text" name="family-name" />
</form>

css

form { 
    min-width: 200px;/* set the min width here */
    width: 50%;
    max-width: 400px;/* set the max width here */
    margin: 0 auto; 
}
form textarea, 
form input { 
    width: 100%;
}

或

form { 
    min-width: 200px;
    width: -webkit-calc(100% -20px);
    width: -moz-calc(100% -20px);
    width: calc(100% -20px);
    max-width: 400px;
    margin: 0 auto; 
}
form textarea, 
form input { 
    width: 100%;
}

读：
css3 calc

CSS max-width Property

HTML - 使用CSS自动调整文本框，同时表单详细信息保持居中对齐

2 个答案: