Question

我想要一个包含width:auto;和display:block;的按钮。此按钮应以margin:0 auto为中心。但是如果我把所有东西放在一起，它就行不通。

我做错了什么？

CODE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asd</title>
</head>
<body>
I am an example content and I should be above the button. I want to have an auto width and being centered
<style type="text/css">
    .btn{
            color:black;
            font-size: 14px;
            line-height:14px;
            text-align: center;
            font-weight: bold;
            margin:0 auto;
            height:14px;
            display:block;
            cursor: pointer;
            background-color:red;
            padding:15px;
            text-decoration:none;   
    }
</style>
<a class="btn">helloworld</a>
</body>
</html>

Answer 1

您可以使用inline-block代替block：

body {
    text-align:center;
}
.btn{
   display:inline-block;
}

演示 Fiddle

另一个选项使用display:table，这样可以使用自动边距：

.btn {
   display:table;
   margin: 0 auto;
}

演示 Fiddle

Answer 2

如果将其设置为width: auto，则该元素将填充整个屏幕。所以它是居中的，但你无法分辨，因为它占据了整个屏幕。只需将width: auto更改为固定宽度，例如50px或30%，它就会正确居中。 Demo

如果你有可变内容，那么摆脱height: 15px它会起作用。使用width: 65%看起来也会更好一些。 Demo

中心CSS按钮，宽度为auto

2 个答案: