0

開発サイトでここに表示されている各画像の下に、画像テキストのキャプションを中央に配置するのに苦労しています: http://tinyurl.com/bh8uape

各キャプションを対応する画像の下の中央に配置したいと思います。これどうやってするの？

HTML

<!--/ Photo Thumbs Row 1-->

<div id="thumbs">

<a id="single_image" href="/bp/images/roscoes-run.jpg"><img src="/bp/images/roscoes-run(thumb).jpg" alt=""/></a>
<a id="single_image" href="/bp/images/roscoes-run-2.jpg"><img src="/bp/images/roscoes-run-2(thumb).jpg" alt=""/></a>
<a id="single_image" href="/bp/images/chicken-waffles.jpg"><img src="/bp/images/chicken-waffles(thumb).jpg" alt=""/></a>

<span class="stretch"></span>


</div>

<!--/ Description-->

<div id="desc-wrapper">
<div class="description">Roscoe's Run 2012</div>
<div class="description">Roscoe's Run 2012</div>
<div class="description">Roscoe's Run 2012</div>
</div>




<!--/ Photo Thumbs Row 2-->

<div id="thumbs">

<a id="single_image" href="/bp/images/mens-retreat-2012.jpg"><img src="/bp/images/mens-retreat-2012(thumb).jpg" alt=""/></a>
<a id="single_image" href="/bp/images/winter-retreat-2012.jpg"><img src="/bp/images/winter-retreat-2012(thumb).jpg" alt=""/></a>
<a id="single_image" href="/bp/images/new-years-eve-2012.jpg"><img src="/bp/images/new-years-eve-2012(thumb).jpg" alt=""/></a>


<span class="stretch"></span>

</div>


<!--/ Description-->

<div id="desc-wrapper">
<div class="description">Men's Retreat 2012</div>
<div class="description">Winter Retreat 2012</div>
<div class="description">New Year's Eve 2012</div>
</div>

CSS

/*Fancybox Gallery Divs*/


#thumbs {   
    width: 960px;
    margin-top:20px;
    margin-bottom:20px;
    margin-left: auto; 
    margin-right: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

/*Descriptions*/


#desc-wrapper {
    width: 960px;
    padding-top: 10px;
    margin-left: auto; 
    margin-right: auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.description {
    width: 360px;
    height: 25px;

}

あなたの助けに感謝します。

4

3 に答える 3

2

floatCSS プロパティを使用しtext-alignて、探している結果を取得する必要があります。

.description {
  float:left;
  width: 320px; // Increase/decrease width for margin between images
  height: 25px;
  text-align:center;
}

div説明の後に、フローティング コンテンツをクリアする別の説明を追加します。

<div class="description">Men's Retreat 2012</div>
<div class="description">Winter Retreat 2012</div>
<div class="description">New Year's Eve 2012</div>
<div class="clear"></div>

次の CSS を使用します。

.clear {
  clear:both;
}

マージン/パディングの最初/最後の要素を選択する:

タグの 1 つの余分な幅に問題がある場合divは、疑似クラスを使用するかCSS、最初または最後のdivタグ内に別のクラスを追加できます。以下にいくつかの例を示します。

<div class="description smaller-width">Men's Retreat 2012</div>
<div class="description">Winter Retreat 2012</div>
<div class="description">New Year's Eve 2012</div>
<div class="clear"></div>

.smaller-width {
  width:300px;
}

また

.description:first-child {
  width:300px;
}

:first-childよりも IE でのサポートが優れているため、 を使用しています:last-child。:first-childが IE8 以前で動作するには、 a<!DOCTYPE>を宣言する必要があることに注意してください。

于 2013-01-12T23:48:05.187 に答える
0

2 つのことを行う必要があります。

  1. を使用して、説明要素をフロートさせて、互いの後に水平になるようにしますfloat: left;
  2. を使用して、説明要素内のテキストを中央に配置しますtext-align: center;

このようなもの：

.description {
    width: 360px;
    height: 25px;
    float: left;
    text-align: center;
}
于 2013-01-12T23:50:20.647 に答える
0

各画像とその下のテキストを div に追加する必要があります。何かのようなもの：

<div>
img
p
</div>

そうすれば、div p: text-align center; を作成できます。

于 2013-01-13T00:25:44.033 に答える