在链接和样式表中使用类？

Question

您好，我正在尝试设计一个类对象

<a href="url here" class="gallery">View Photos</a>

这是我的css

.gallery
{
width:60px;
background-color: #09a2e9;  
padding:5px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: Function Pro Light;
color:#fff;
font-weight:bold;
font-size:30px;
}

a.gallery:link {
font-family: Function Pro Light;
color:#fff;
font-weight:bold;
font-size:30px;
}

我想要的是这样的

http://i.stack.imgur.com/Ue6sM.jpg

但我的 CSS 无法正常工作。我该如何解决这个问题。

div 会拉伸整个宽度，我根本不希望它拉伸，也不想设置太多宽度和高度。

另外我如何在不添加

的情况下使其居中

<center> </center> 

标签

Answer 1

其他一些答案很接近，但应该这样做。

对于居中，您不能对 inline 或 inline-block 元素执行 margin: 0 auto。只有block 级别的元素会以这种方式居中（如果它们具有设定的宽度）。您需要将按钮/链接元素放在块级元素（如div 或p）内，然后在该父元素上设置text-align: center。

HTML：

<p><a href="#" class="gallery">My Button</a></p>

CSS：

p {
  text-align: center;
}

.gallery {
  background-color: #09a2e9;  
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-family: "Function Pro Light", Arial, Sans-Serif;
  font-size: 30px;
  font-weight: bold;
  padding: 5px;
  text-decoration: none;
}

还有一个工作示例：http://jsfiddle.net/kzTnv/
浏览器支持边框半径：http://caniuse.com/#search=border-radius

Answer 2

a.gallery{
width:60px;
background-color: #09a2e9;  
padding:5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-family: Function Pro Light;
color:#fff;
font-size:30px;
margin: 0 auto;
}

a.gallery:link {
font-family: Function Pro Light;
color:#fff;
font-weight:bold;
font-size:30px;
text-decoration: none;
}

如果需要，您也可以从Google Web Fonts 获取字体。

到中心：margin: 0 auto

Answer 3

以下内容应适用于现代浏览器（即不是 IE7 或更低版本）

.gallery
{
  /* force the element to keep to it's content */
  display: inline-block;
  /* centering */
  margin-left: auto;
  margin-right: auto;
  /* */
  background-color: #09a2e9;  
  padding: 5px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-family: Function Pro Light;
  color: #fff;
  font-weight: bold;
  font-size: 30px;
}