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

Question

我试图使图标，文本和按钮垂直位于div的中心。

因此，尝试很好地使用引导程序类，但仍然无法正常工作。 有人可以帮我吗？

这是要参考的图像： 在此处输入图片说明

CSS部分：

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

这是我所有的代码：

<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：

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

HTML：

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

在线演示1

编辑1：

如果在对齐的元素上使用不同的font-size属性，则应指定line-height属性。

在线演示2

编辑2：

只需将图标包装到小标签中，将更容易，更正确：

<small></small>

或者只是使用自定义修饰符类：

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

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

问题描述

1 个解决方案

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

编辑1：

编辑2：

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

问题描述

1 个解决方案

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

编辑1：

编辑2：

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