4

シンプルな画像ギャラリーに次のコードを使用しました (実際のコードはhttp://w3schools.comにあり、完全に機能します)。css を編集した後、テキストの配置が変更されました。テキストを中央揃えにしたい。答えを知っている人は助けてください。

私のHTMLコード:

<html>
<body>
<div id="d">
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here </div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</p>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</P>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
</div>
</body>
</html>

私のCSSコード:

#d
{
width : 660;
border:1px;
}
.img
{
margin:3px;
border:1px solid #0000ff;
height:200;
width:200;
float:left;
text-align:center;
}
.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
width:100;
height : auto;
}
.img a:hover img
{
border:2px solid #0000ff;
}
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}

スクリーンショット: ここに画像の説明を入力

4

5 に答える 5

4

div の幅を削除します。

.desc {
  text-align: center;
  font-weight: normal;
  margin: 2px;
}

また、それをtext-alignに変更します。属性 align が存在しません。

于 2013-02-09T09:42:58.677 に答える
2

これを試して：

.desc{
margin: 0 auto;
}
于 2013-02-09T09:42:41.343 に答える
2

margin プロパティの値を変更する必要があります。

.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px auto;
}

また、この部分にはハッシュ記号がありません。

<style>

d
{
width : 660;
border:1px;
}

次のように変更する必要があります。

<style>

#d {
   width : 660;
   border:1px;
}
于 2013-02-09T09:55:07.590 に答える
1

cssをに変更

.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}

align:center;に変更text-align:center;

于 2013-02-09T09:34:35.067 に答える