在图像的上方和下方显示文本

Question

我有一个页面，我正在显示一个图像，并试图在图像的上方和下方放置一些文本。

这就是我想做的。

    <div data-role="page"  >
                <div data-role="header">
                    <h1>First image</h1>
                </div><!--header ends-->
                <div data-role="content" >
                    <center>
                                <h3> image name </h3>
                    <img src="Firstimage.png" alt=""  style="height:100%; width:auto;" />
                                <h3> autor name </h3>           
</center>   
                </div>
                <div data-role="footer"   >
                </div> <!--footer ends here -->
            </div>

图片名称和图片之间的空间太大，页面正在滚动。作者的名字也一样…

我分别去取图片上方和下方的图片名和作者名。

我该怎么做呢?

谢谢:)

Answer 1

为h1,h2,h3，....使用重置类在本例中使用

h3 {
padding:0;
margin:0;
}

和center标签是过时的，尽量避免它，并使用CSS类代替

Answer 2

<h3>有自己的padding(或margin)。所以只要用<div>加上一些样式就可以了。