在页面中心显示文本字段

Question

我们有this的表单页面：

我们想要设计this：

意思是：

1. 姓名＆amp;电子邮件及其文本字段应如上图所示。

2. 消息＆amp;它的框应该显示为评论部分。

3. 同样需要Name＆amp;电子邮件如下。

4. 底部有2个按钮之间需要空格。

CSS

|.|

HTML

media only screen and (min-width: 1224px)
.send-friend h2 {
  text-align: center;
}

@media only screen and (min-width: 1224px)
  form .legend {
    border: none;
    color: #000;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 15px;
    padding-bottom: 7px;
    text-rendering: optimizespeed;
    text-transform: uppercase;
  }
}

Answer 1

也许您可以尝试将表单放在<div>中，然后增加输入框的宽度。

为了审美目的，请将填充物留下一些空白区域：）

示例<input type="text" id="text" name="text_name" style="width: 300px;" /> （如果你不考虑回应）

如果您使用.text{max-width:110%;}

，我更愿意

由于您不熟悉CSS，因此可以通过放置逗号以及您希望应用以下css的相应标记来将前面显示的CSS用于多个ID。

然后，对于指示哪个文本框是什么的单词，您可以使用text-align:left

Answer 2

您可以使用引导类text-center在中心位置设置对齐。