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

以下内容适用于现代浏览器（即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;
}

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

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

对于居中，您无法margin: 0 auto或inline元素inline-block。只有block级别元素将以此方式居中（如果它们具有设置的宽度）。您需要将button / link元素放在块级元素（如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

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

3 个答案: