在图像上方和下方显示文字

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;
}

中心标记是无效的，请尽量避免使用CSS代码。

Answer 2

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