Jasmine22 Jasmine22 - 1 year ago 92
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?


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

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



Answer Source

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

h3  {
  margin: 0
figcaption {
  background-color: gray;
  color: white;
  text-align: center
img {
  width: 500px;
  /*changed for demo*/
  margin: auto;
  max-width: 100%;
  display: block
img {
  height: 500px
  <img src="//placehold.it/1200x500" alt="HTML5 Icon">
  <h3><strong>TEXT HERE.</strong><br /></h3>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download