如何在我的图像上方和我的图像下方显示文本?

时间:2013-10-20 14:28:58

标签: html css html5 center

您好我是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>

这就是为什么一切都浮在水面上。有人可以在不移动导航栏和宝贝标题的情况下将我的图像和文本置于中心位置以上吗?提前谢谢!

1 个答案:

答案 0 :(得分:0)

小提琴示例

text-align: center; 
CSS中的

表示你的CSS中似乎没有这个,所以文字将在左边;