Jasmine22 Jasmine22 - 2 months ago 17
CSS Question

Centering properties with html

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>

Answer

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>