Html 如何在div中使引导图标文本和按钮垂直居中_Html_Css_Twitter Bootstrap

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

html css twitter-bootstrap

Html 如何在div中使引导图标文本和按钮垂直居中,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试图使图标、文本和按钮垂直放置在div的中心所以，尝试很好地使用引导类，但仍然不起作用。有人能帮我吗以下是要参考的图像： Css部分： .brl-icon-size { font-size: 2.5em; } 以下是我的全部代码： <html> <head> <title>Index file</title>  <link rel="

我试图使图标、文本和按钮垂直放置在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>

CSS:

HTML:

或者简单地使用自定义修改器类：

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

嗨，对不起，忘了说图标的字体大小是2.5em；在这种情况下，我不知道如何使所有的东西垂直，如果你把valign top添加到每个元素中，你想对齐top，难道你没有得到想要的结果吗？试试看？是的，我试过了，不起作用，棘手的是图标的字体大小需要是2.5em；指定您正在谈论的图标？

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

<small></small>

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