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に対してはできません。レベル要素のみがこのように中央揃えになります (幅が設定されている場合)。ボタン/リンク要素をブロック レベル要素 (や など) 内に配置し、その親要素に設定する必要があります。inlineinline-blockblockdivptext-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 に答える