垂直居中<a> with glyphicon on Bootstrap 3

时间:2015-07-16 09:33:05

标签: html css twitter-bootstrap twitter-bootstrap-3

I'm using Twitter Bootstrap 3, and I don't have any additional CSS file. I have the following code somewhere in my HTML page:

<div class="col-md-12">
    <div class="col-md-5">
        <input type="text" class="form-control" placeholder="Task"/>
    </div>    
    <div class="col-md-5">
        <input type="textarea" class="form-control" placeholder="Descr."/>
    </div>
    <a ng-click="addTask()" class="glyphicon glyphicon-plus"></a>
</div>

It looks like this:

enter image description here

As you can see, the + is not well centered. I would like to vertical align it with my inputs. I suppose it is something simple, but I have not yet found a good solution ...

Can you help me finding how I can vertical center this <a> ?

Thanks :-)

3 个答案:

答案 0 :(得分:1)

添加此项(根据您的喜好更改px)

<a ng-click="addTask()" class="glyphicon glyphicon-plus" style="margin-top:15px;"></a>

答案 1 :(得分:1)

您还可以使用vertical-align: middle;

<a ng-click="addTask()" class="glyphicon glyphicon-plus" 
   style="vertical-align: middle;"></a>

答案 2 :(得分:0)

试试这个:

<a ng-click="addTask()" class="glyphicon glyphicon-plus" style="display: inline-block; margin-top:15px;"></a>