Question

我正在使用带有SB Admin 2主题的Bootstrap框架作为应用程序，有一些按钮，例如：

<button class="btn btn-primary btn-circle btn-outline btn-xl">UV</button>
<button class="btn btn-primary btn-circle btn-xl">Kl S</button>
<button class="btn btn-primary btn-circle btn-outline btn-xl">Kl 15</button>

这就是它们应该如何显示（实际上是在Firefox中）正确的文本对齐（抱歉，我还不能发布图像）： http://i123.photobucket.com/albums/o308/spinfun/firefox2.jpg

这就是Chrome显示的内容： http://i123.photobucket.com/albums/o308/spinfun/chrome2.jpg

所以我的问题是：如何让Chrome以水平居中的文字显示这些按钮？

编辑：我已经设置了一个真正的基本页面，只有这3个按钮。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Bootstrap Core CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <!-- custom CSS SB Admin-->
        <link rel="stylesheet" href="http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css">
    </head>

    <body>
        <button class="btn btn-primary btn-circle btn-outline btn-xl">UV</button>
        <button class="btn btn-primary btn-circle btn-xl">Kl S</button>
        <button class="btn btn-primary btn-circle btn-outline btn-xl">Kl 15</button>

        <!-- Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <!-- SB Admin Theme -->
        <script src="http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
    </body>
</html>

在我使用的每台计算机上，按钮文本根本不会在Chrome的中心显示。

没有SB Admin css，对齐是正确的，但按钮当然不是圆形的。所以问题必须在SB Admin的内容中。

Answer 1

您需要将此类覆盖到自定义CSS文件中。

<强> CSS

.btn-circle.btn-xl {
    padding: 10px 0;
}

SB Admin v2.0主题有一些预定义的CSS导致问题。

以下课程在其sb-admin-2.css文件中有padding: 10px 16px;

.btn-circle.btn-xl {
    padding: 10px 16px;
}

Bootstrap SB Admin 2：按钮文本对齐在Chrome中无法正常工作

1 个答案: