如何使引導圖標文本和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