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

您需要使用 CSS 属性float并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;
}

为边距/填充选择第一个/最后一个元素：

如果您在其中一个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;
}

我们正在使用 IE，:first-child因为它在 IE 中的支持比:last-child. 请注意，:first-child要在 IE8 及更早版本中工作，<!DOCTYPE>必须声明 a。

于 2013-01-12T23:48:05.187 回答
0

你需要做两件事。

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