Question

我试图让图标，文字和按钮垂直放置在div的中心。

所以，尝试使用bootstrap类，但仍然无法正常工作。有人可以帮助我吗？

以下是要参考的图片： enter image description here

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>

Online Demo 1

编辑1：

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

Online Demo 2

编辑2：

将图标包装到小标记中更简单，更正确：

<small></small>

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

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

如何在div中制作bootstrap图标文本和按钮垂直中心

1 个答案:

编辑1：

编辑2：