1

I have a picture and Text under, How could I center both and make them right under eachother (equal in width). Also to center them in the middle of the web page I tried "div: wrapper" but it didnt work, any ideas?

 <?php 

 require "header.php";
 ?>
  <!DOCTYPE html>
<html>
  <body>

 <img src="Page.jpg" alt="HTML5 Icon" width="1200" height="500">

 <div style='background-color:gray; color:white;align:center; width:1500; height:500;  position: absolute;'>

 <h3 style= 'font-weight:bold'>TEXT HERE.<br>

TEXT HERE

 </div>
</body>
</html>
  • You need css for that – Robbin van der Jagt Sep 16 '16 at 14:13
  • 1
    I'm not seeing much of an attempt here. `align` is not a valid CSS property. I foresee this question getting closed due to it's poor quality and the fact that this question has been asked many times before. – hungerstar Sep 16 '16 at 14:13
  • Try using `figure` and `figurecaption` per the answer in this question: http://stackoverflow.com/questions/10128950/how-to-write-a-caption-under-an-image – dckuehn Sep 16 '16 at 14:14

1 Answers1

0

You can use figure and figcaption, and using margin:auto in block level elements will make center in your page

Note you have a few errors on your code:

  • width/height are unit-less

  • alignin CSS is a property that doesn't exist, you were looking for text-align

  • and don't use inline styles

body,
figure,
h3  {
  margin: 0
}
figcaption {
  background-color: gray;
  color: white;
  text-align: center
}
figcaption,
img {
  width: 500px;
  /*changed for demo*/
  margin: auto;
  max-width: 100%;
  display: block
}
img {
  height: 500px
}
<figure>
  <img src="//placehold.it/1200x500" alt="HTML5 Icon">
</figure>
<figcaption>
  <h3><strong>TEXT HERE.</strong><br /></h3>
  TEXT HERE
</figcaption>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • One note (I know you know this @dippas), when centering with auto margins a width needs to also be set in order for auto margins to work, i.e. `div { width: 500px; margin: 0 auto; }`. Which was done in the answer above but not so much in the comment about auto margins. I'm a bit of a stickler for `width + auto margins = centering`. – hungerstar Sep 16 '16 at 14:42