html - 在图像上方和下方显示文本

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

<h3>有自己的填充（或边距）。所以只需使用<div>一些样式。

Answer 2

对 h1,h2,h3,.... 使用重置类。在这种情况下使用，

h3 {
padding:0;
margin:0;
}

并且中心标签是过时的，尽量避免它并改用CSS类。