css - 如何让文字恢复到图片上方和下方？

Question

您好，我是 html 和 css 的新手，我有一个问题。我正在使用以下代码来设置一些图片，上面和下面都有文字，您可以在此处看到:

http://jsfiddle.net/thespacebean/xGqDE/

但现在我正尝试在另一个框中重新使用该代码，但文本不在需要的位置。这里使用另一种类型的盒子:

CSS:

#content{
  margin: 30px 0;
  background: white;
  padding: 20px;
  clear: both;
  box-shadow: 0px 1px 1px #999;
} 

html:

<div id="content">
    <h2>Kleding</h2>
    <div id="navbanner">
    <div id="nav2">
        <ul>
            <li><a href="../html/kleding.html"id="Babynav">Baby</a></li>
            <li><a href="../html/kleding.html"id="Peuternav">Peuter</a></li>
            <li><a href="../html/kleding.html"id="Kleuternav">Kleuter</a></li>
        </ul>
    </div>
    </div>
    <div id="img">
      <img src="../images/winkelwagen.jpg">
    </div>
    <h3>Baby</h3>
    <div class="section">
        <a href="../html/kleding.html"> Pika deken</a>
        <a href="../html/kleding.html"><img src="../images/baby1.jpg" /></a>
        €20
    </div>
    <div class="section">

        <a href="../html/kleding.html">School outfit</a>
        <a href="../html/kleding.html"><img src="../images/boy1.jpg" /></a>
        €140
    </div>
    <div class="section">
        <a href="../html/kleding.html">Bussines girl</a>
        <a href="../html/kleding.html"><img src="../images/girl2.jpg" /></a>
        €250
    </div>
    <div class="section">
        <a href="../html/kleding.html">Summer</a>
        <a href="../html/kleding.html"><img src="../images/girl1.jpg" /></a>
        €99.99
    </div>
</div>

这就是为什么一切都向左浮动的原因。有人可以在不移动导航栏和婴儿标题的情况下让我的图像和文字居中吗？提前致谢!

Answer 1

fiddle 的例子有

text-align: center; 

在 CSS 中，您的 CSS 中似乎没有这个，因此文本将在左侧；