Отображение текста выше и ниже изображения

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

И центр тег obsolute, попробуйте избегайте этого и вместо этого используйте класс CSS.

Answer 2

<h3> имеет свою собственную прокладку (или маржу). поэтому просто используйте <div> с некоторым стилем.