如何使引导图标文本和div中的按钮垂直居中

Question

I am trying to make the icon, text and button sit in the center of the div vertically. 我试图使图标，文本和按钮垂直位于div的中心。

So, tried to use bootstrap class well, but still not working. 因此，尝试很好地使用引导程序类，但仍然无法正常工作。 Could someone help me on that? 有人可以帮我吗？

Here is the image to reference: 这是要参考的图像： 在此处输入图片说明

Css part: CSS部分：

.brl-icon-size { font-size: 2.5em; }

Here is all my code: 这是我所有的代码：

<html>
<head>
<title>Index file</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2 sidebar">
              Sidebar
            </div>
            <div class="col-md-10 col-md-offset-2 content">
                <div class="well well-lg">
                    <span class="glyphicon glyphicon-file brl-icon-size"></span>
                    <span>New Message</span>
                    <div class="pull-right">
                        Save draft
                        <button>Publish</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

CSS: CSS：

.valign-top {
    vertical-align:top;
}

HTML: HTML：

<div class="pull-right">
      <span class="valign-top">Save draft</span>
      <button>Publish</button>
</div>

Online Demo 1 在线演示1

EDIT 1: 编辑1：

In case you use different font-size properties on aligned elements, then you should specify line-height property. 如果在对齐的元素上使用不同的font-size属性，则应指定line-height属性。

Online Demo 2 在线演示2

EDIT 2: 编辑2：

It's easier and more correct to just wrap you icon into small tag: 只需将图标包装到小标签中，将更容易，更正确：

<small></small>

Or simply using custom modifier class: 或者只是使用自定义修饰符类：

.icon-any-size {
   zoom: 2;
   -moz-transform: scale(2);  /* Firefox */
}

如何使引导图标文本和div中的按钮垂直居中

问题描述

1 个解决方案

解决方案1
0 2014-06-30 11:23:20

EDIT 1: 编辑1：

EDIT 2: 编辑2：

如何使引导图标文本和div中的按钮垂直居中

问题描述

1 个解决方案

解决方案1 0 2014-06-30 11:23:20

EDIT 1: 编辑1：

EDIT 2: 编辑2：

解决方案1
0 2014-06-30 11:23:20