Question

我有一个表格，例如这个小提琴，https://jsfiddle.net/ejkvp88v/2/。基本上，我有一个表单，其输入都是中心对齐的，这正是我希望它们出现的方式，但是我非常希望输入上方的输入标签，但与它们的左侧对齐。到目前为止，我发现我在实现这一目标方面遇到了很多麻烦。我试过在S.O.上看一些不同的问题。没有用，所以希望有人能指出我正确的方向。我已将我当前的HTML和CSS包含在下面以供参考。

总而言之，我正在努力保持表单输入在页面中居中，但我希望它们的标签位于输入之上并与输入的左侧对齐。

首先，这是表单html：

<div class="container">
<div class="base-template">
     <h1>A form whose labels need some aligning</h1>

    <p class="lead">Use the form below to submit some information.</p>
</div>
<div class="container">
    <div class="table-responsive">
        <div class="request-form-container">
            <form action="" method="post" accept-charset="utf-8">
                <label for="email" class="formLabel">E-Mail Address</label>
                <br />
                <input type="text" name="email" value="" id="email" size="30" />
                <br />
                <br />
                <label for="firstName" class="formLabel">First Name</label>
                <br />
                <input type="text" name="firstName" value="" id="firstName" size="30" />
                <br />
                <br />
                <label for="lastName" class="formLabel">Last Name</label>
                <br />
                <input type="text" name="lastName" value="" id="lastName" size="30" />
                <br />
                <br />
                <button name="" type="submit" id="submitButton" class="btn btn-default btn-default">Submit&nbsp;<span class="glyphicon glyphicon-transfer"></span>
                </button>
            </form>
        </div>
    </div>
</div>

这是我的CSS文件，我在这个项目中使用bootstrap，所以这里只是为了定制而做的一些具体修改。

body {
padding-top: 50px;
}

.base-template {
padding: 40px 15px;
text-align: center;
color: #060a84;
}
a {
color: #060a84;
}
.formLabel {
color: #060a84;
}
.request-form-container {
padding: 0.5em;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
.successMessage {
text-align: center;
}
.submitFormContainer {
margin-top: 1.6em;
}
#navbar {
background-color: #525eab;
}
.navbar-inverse {
background-color: #525eab;
}
.nav-bar-fixed-top {
background-color: #525eab;
}
.navbar-inverse .navbar-brand {
color: white;
}
.error {
color: red;
font-weight: bold;
font-size: 1.1em;
}

最后，这就是我希望表单出现的方式。我在photoshop中创建了这个图像，只是为了快速演示我正在尝试做什么。

enter image description here

Answer 1

实现所需内容的最简单方法是将每个标签和输入字段包装在div中，并使text-align: center对该元素产生影响。您需要将一些样式应用于包装器，以使其行为类似于内联元素并具有居中功能。

这种方法还避免了必须在任何元素上指定宽度，以便在您想要在不同的屏幕尺寸上显示时更灵活。

<div class='input-wrapper'>
  <label for="email" class="formLabel">E-Mail Address</label>
  <br />
  <input type="text" name="email" value="" id="email" size="30" />
</div>

然后风格：

.input-wrapper {
  display: inline-block;
  text-align: left;
}

这是一个显示它工作的小提琴： https://jsfiddle.net/ta0pesyb/

Answer 2

将您的字段放在容器中（span或div）。对齐容器中心，并将容器左侧的字段对齐。然后标签将很容易与下面的字段对齐。

Answer 3

最简单的方法是将所有内容放在已定义container的{{1}}中，然后使用width规则将其置于中心位置。

保留默认的文本对齐（左侧），并根据您希望放置margin: auto的位置调整容器的width。

例如：https://jsfiddle.net/ejkvp88v/4/

inputs

Answer 4

解决方案是使用display：inline-block;并将标签文本左对齐，但您必须修复标签文本的宽度。将以下内容添加到CSS中：

label { display: inline-block; width: 245px; text-align: left; }

CSS将标签与输入对齐

4 个答案: