html - 如何在 Bootstrap 3 中垂直居中对齐输入和选择表单字段

Question

我正在处理一个包含多个表单字段的注册表单。其中有两个select 字段和一个input 表单字段，其标签 为button radios。我遇到的问题是我想在中间垂直对齐这 3 个元素。但它不起作用。我已经为这项工作尝试了几种 CSS 规则和技巧，但没有成功。

这是我的 HTML 代码:

 <fieldset id="contact-info">
    <legend>
        اطلاعات تماس </legend>
    <div class="col-xs-12 text-right">
        <div class="col-xs-12">
            <div class="col-xs-3">
                <div class="form-group">
                    <label for="province" class="control-label">
                        استان <sup>
                    * </sup>
                    </label>
                    <select id="province" class="form-control selectpicker show-tick" data-size="8">
                        <?php $provinces=P rovince::all()?>
                        <option value="0">انتخاب کنید</option>
                        @foreach($provinces as $p)
                        <option value="{{$p->id}}">{{$p->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="form-group">
                    <label for="city" class="control-label">
                        شهر <sup>
                    * </sup>
                    </label>
                    <select id="city" class="form-control selectpicker show-tick" title='ابتدا استان محل سکونت خود را انتخاب کنید' data-size="8" disabled>
                    </select>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label">
                        آدرس
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-default active">
                                <input type="radio" name="options" id="option1" autocomplete="off" checked> مطب </label>
                            <label class="btn btn-default">
                                <input type="radio" name="options" id="option2" autocomplete="off"> کلینیک </label>
                            <label class="btn btn-default">
                                <input type="radio" name="options" id="option3" autocomplete="off"> درمانگاه </label>
                            <label class="btn btn-default">
                                <input type="radio" name="options" id="option3" autocomplete="off"> بیمارستان </label>
                        </div>
                    </label>
                    <sup>
                    * </sup>
                    <input tabindex="3" data-toggle="popover" data-trigger="focus" data-html="true" data-content="<div>
                    <h5 class='red-color'>وارد کردن شماره همراه الزامیست.</h5>
                    <h5>مثال : 09121234567</h5>
                </div>
                " data-placement="left" data-original-title="شماره همراه کاربر" id="address" name="cell" class="form-control input-popover" type="text">
                </div>
            </div>
        </div>
        <div class="col-xs-2">
            <div class="form-group">
                <label for="fname" class="control-label">
                    تلفن 1 <sup>
            * </sup>
                </label>
                <input tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" data-content="<div>
            <h5 class='red-color'>وارد کردن نام الزامیست.</h5>
            <h5>نام باید :</h5>
            <ul>
                <li>تنها از حروف فارسی تشکیل شده باشد.</li>
                <li>حداکثر 40 کاراکتر باشد.</li>
            </ul>
        </div>
        " data-placement="left" data-original-title="نام کاربر" id="fname" name="fname" class="form-control input-lg ltr-input input-popover" type="text">
            </div>
        </div>
        <div class="col-xs-2">
            <div class="form-group">
                <label for="fname" class="control-label">
                    تلفن 2 </label>
                <input tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" data-content="<div>
        <h5 class='red-color'>وارد کردن نام الزامیست.</h5>
        <h5>نام باید :</h5>
        <ul>
            <li>تنها از حروف فارسی تشکیل شده باشد.</li>
            <li>حداکثر 40 کاراکتر باشد.</li>
        </ul>
    </div>
    " data-placement="left" data-original-title="نام کاربر" id="fname" name="fname" class="form-control input-lg ltr-input input-popover" type="text">
            </div>
        </div>
        <div class="col-xs-2">
            <div class="form-group">
                <label for="fname" class="control-label">
                    تلفن 3 </label>
                <input tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" data-content="<div>
    <h5 class='red-color'>وارد کردن نام الزامیست.</h5>
    <h5>نام باید :</h5>
    <ul>
        <li>تنها از حروف فارسی تشکیل شده باشد.</li>
        <li>حداکثر 40 کاراکتر باشد.</li>
    </ul>
</div>
" data-placement="left" data-original-title="نام کاربر" id="fname" name="fname" class="form-control input-lg ltr-input input-popover" type="text">
            </div>
        </div>
        <div class="col-xs-2">
            <div class="form-group">
                <label for="fname" class="control-label">
                    تلفن 4 </label>
                <input tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" data-content="<div>
<h5 class='red-color'>وارد کردن نام الزامیست.</h5>
<h5>نام باید :</h5>
<ul>
    <li>تنها از حروف فارسی تشکیل شده باشد.</li>
    <li>حداکثر 40 کاراکتر باشد.</li>
</ul>
</div>
" data-placement="left" data-original-title="نام کاربر" id="fname" name="fname" class="form-control input-lg ltr-input input-popover" type="text">
            </div>
        </div>
        <div class="col-xs-2">
            <div class="form-group">
                <label for="fname" class="control-label">
                    تلفن 5 </label>
                <input tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" data-content="<div>
<h5 class='red-color'>وارد کردن نام الزامیست.</h5>
<h5>نام باید :</h5>
<ul>
<li>تنها از حروف فارسی تشکیل شده باشد.</li>
<li>حداکثر 40 کاراکتر باشد.</li>
</ul>
</div>
" data-placement="left" data-original-title="نام کاربر" id="fname" name="fname" class="form-control input-lg ltr-input input-popover" type="text">
            </div>
        </div>
        <div class="col-xs-2">
            <div class="form-group">
                <label for="fname" class="control-label">
                    تلفن 6 </label>
                <input tabindex="0" data-toggle="popover" data-trigger="focus" data-html="true" data-content="<div>
<h5 class='red-color'>وارد کردن نام الزامیست.</h5>
<h5>نام باید :</h5>
<ul>
<li>تنها از حروف فارسی تشکیل شده باشد.</li>
<li>حداکثر 40 کاراکتر باشد.</li>
</ul>
</div>
" data-placement="left" data-original-title="نام کاربر" id="fname" name="fname" class="form-control input-lg ltr-input input-popover" type="text">
            </div>
        </div>
    </div>
    <div class="col-xs-3">
    </div>
    <div class="col-xs-12">
    </div>
</fieldset>

这是我的问题照片: http://se.uploads.im/2bKkF.png

感谢您的帮助。

Answer 1

您应该为我们提供一些 CSS 以便我们查看，但没关系。我已经回答了类似的问题，所以这里是水平和垂直的例子......

HTML:

<div class="container">    
   <div class="inputs_div">
      <input class="input_1" type="text" name="first_name" />
      <input class="input_2" type="text" name="last_name" />
   <div>  
</div>

CSS:

.container {
   float: left;
   margin-top: 0;
   margin-left: 0;
   width: 100%;
   height: 200px;
   background-color: red; }

.container .inputs_div {
   position: relative;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   width: 210px;
   height: 22px; }

.inputs_div .input_1 {
   float: left;
   margin-top: 0;
   margin-left: 0;
   width: 100px;
   height: 20px;
   border: none;
   outline: none; }

.inputs_div .input_2 {
   float: left;
   margin-top: 0;
   margin-left: 10px;
   width: 100px;
   height: 20px;
   border: none;
   outline: none; }

或者你可以设置为 inputs_div 下一个 CSS:

position: relative;
top: 50%;
margin: 0 auto;
width: 210px;
height: 22px;

这是 fiddle .

问候，米兰。