Css 引导SB Admin 2:按钮文本对齐在Chrome中不起作用_Css_Twitter Bootstrap_Google Chrome

Css 引导SB Admin 2:按钮文本对齐在Chrome中不起作用

css twitter-bootstrap google-chrome

Css 引导SB Admin 2:按钮文本对齐在Chrome中不起作用,css,twitter-bootstrap,google-chrome,Css,Twitter Bootstrap,Google Chrome,我正在为一个应用程序使用带SB Admin 2主题的引导框架，它有一些按钮，例如： <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 b

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

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

UV
吉隆坡
吉隆坡15

这就是它们应该如何以正确的文本对齐方式显示（实际上在Firefox中）（对不起，我还不能发布图像）：

这就是Chrome显示的内容：

所以我的问题是：如何让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>


紫外线
吉隆坡
吉隆坡15

在我使用的每台计算机上，按钮文本都不会以Chrome水平居中显示

没有SB管理员css，对齐是正确的，但是按钮当然不是圆形的。因此，问题必须在SB Admin文件中的某个地方。

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

CSS

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

SB Admin v2.0主题有一些预定义的CSS，这是导致问题的原因

下面的类具有

填充：10px 16px编码到其sb-admin-2.css文件中
.btn-circle.btn-xl {
    padding: 10px 16px;
}

因为我不能发布超过2个链接：当文本足够短时，对齐方式甚至在Chrome中居中：这是Chrome日志：它在Chrome中运行良好。不幸的是，它不适合我，正如我们在第二幅图中所看到的。好的。。。你能用fiddle发布你的html吗？我用一个代码样本编辑了这个问题。这很好，非常感谢，Nilesh。但是你，或者其他人，能简单地解释一下为什么浏览器的行为不同吗？