在引导程序中居中和垂直对齐输入字段

Question

我有一组输入字段：

    <p>
        <input type="image" src="images/text_to_speech.svg" alt="Speak This" width="48" height="48" id="say_button"></input>

        <input type="text" value="" class="input-lg" id="say_utterance" placeholder="Enter text to speak..."></input>

        <span id="say_remaining"></span>
    </p>

它没有垂直对齐。如何解决这个问题？

Answer 1

尝试将其放在div而不是p中。

<div class="vcenter">
<input type="image" src="images/text_to_speech.svg" alt="Speak This" width="48" height="48" id="say_button"></input>

        <input type="text" value="" class="input-lg" id="say_utterance" placeholder="Enter text to speak..."></input>

        <span id="say_remaining"></span>
</div>

风格

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Answer 2

对于您提供的最小代码，实际上是导致问题的图像。向其添加vertical-align:middle;，其余的将以中心为准。 Demo

Answer 3

如果您不使用Bootstrap，为什么要使用Bootstrap？

以下是Bootstrap如何为表单提供一些工具/输入类的简单示例：

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" aria-label="...">
            </span>
            <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="radio" aria-label="...">
            </span>
            <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

您需要将输入字段包装成一行，然后通过col-lg-6为2个容器创建2列，总共12列，并为两个输入字段提供行相等/垂直间距。

不要忘记用带有input-group类的div包装您的输入字段