2

嗨我正在尝试设计一个类对象

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

标签

4

3 回答 3

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;
}
于 2013-01-11T18:02:14.417 回答
0 
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

于 2013-01-11T18:05:14.090 回答
0

其他一些答案很接近，但这应该可以。

对于居中，您不能margin: 0 auto为inlineorinline-block元素做。只有block水平元素会以这种方式居中（如果它们具有设定的宽度）。您需要将按钮/链接元素放在块级元素（如 adiv或 a 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

于 2013-01-11T18:13:13.770 回答