How to center this image and it's text

Question

My problem is that I cannot center this image. I've tried margin: 0 and absolute positions but nothing seem to work. I'm kind of a rookie when it comes to html and css. I've cleared my tries to center it from the html and css.

I want the image to be centered even when the site window width changes so padding does not work.

This is my CSS

/* image and text setup container */
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}

.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
right: 60px;
font-size: 18px;
}

img { 
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}

HTML

<!--Front page image and text-->
    <div class="container">
        <img src="Aberlady_Church.png" alt="Church" width="400" height="200">
        <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
    </div>
</div>

At the moment, the image looks like this: http://puu.sh/o706W/ed57f22e12.jpg

Answer 1

You actually just need to apply a "display:block;" + "margin:0 auto;" to your image.

/* image and text setup container */
.container {
  float: left;
  position: relative;
  width: 100%;
  left: 0%;
  right: 0%;
}

.imagetext {
  text-align: left;
  width: 5%;
  position: absolute;
  top: 8px;
  right: 60px;
  font-size: 18px;
}

img { 
  /* add this to make it center */
     display:block;
     margin:0 auto;
  /* add this to make it center */
  padding-right: 5px;
  padding-right: 5px;
  padding-bottom: 15px;
  
}

<div class="container">
  <img src="Aberlady_Church.png" alt="Church" width="400" height="200">
  <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
</div>

Answer 2

You might want to consider wrapping your image and it's associated text in a <div> to separate it from the rest of the page text. This will also allow you to center both elements, regardless of page width. Here's an example:

https://jsfiddle.net/Bendrick92/gyc2n5o5/

.container {
  float: left;
  position: relative;
  width: 100%;
  left: 0%;
  right: 0%;
}
  .imagecontainer {
    width: 75%;
    height: auto;
    margin: 0 auto;
    position: relative;
  }
    .imagecontainer img {
      width: 100%;
      height: auto;
      padding-right: 5px;
      padding-right: 5px;
      padding-bottom: 15px;
    }
    .imagecontainer .imagetext {
      width: 20%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
    }

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
  <div class="imagecontainer">
    <img src="http://www.topsailunitedchurch.nf.net/images/Church2.jpg" alt="Church" />
    <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
</div>

Or if you'd like the image text to be centered below the image:

https://jsfiddle.net/Bendrick92/gyc2n5o5/1/

.container {
  float: left;
  position: relative;
  width: 100%;
  left: 0%;
  right: 0%;
}
  .imagecontainer {
    width: 75%;
    height: auto;
    margin: 0 auto;
    position: relative;
  }
    .imagecontainer img {
      width: 100%;
      height: auto;
      padding-right: 5px;
      padding-right: 5px;
      padding-bottom: 15px;
    }
    .imagecontainer .imagetext {
      width: 100%;
      height: 100%;
      position: relative;
      text-align: center;
    }

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
  <div class="imagecontainer">
    <img src="http://www.topsailunitedchurch.nf.net/images/Church2.jpg" alt="Church" />
    <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
</div>

Answer 3

You have a lot of errors and excess code. I recomend you to read some books about HTML, CSS to upgrade your level.

Here's an example of simply solve of your problem with minimum code. We add image wrapper .image_wrapper, that centered images and text inside it.

CSS

.image_wrapper {
    text-align: center;
}

.imagetext {
    font-size: 18px;
}

img { 
    padding: 5px;
}

HTML

<div class="container">
  <div class="image_wrapper">
    <img src="http://www.theimaginativeconservative.org/wp-content/uploads/2016/02/Pretty-Church.jpg" alt="Church" width="400" height="200" />
    <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
  </div>
</div>

Check it.

https://jsfiddle.net/r1rh7wn4/

Answer 4

I would try the following styles for that markup.

.container {
    width: 100%;
}

.imagetext {
    width: 5%;
    font-size: 18px;
    margin:0;
}

img { 
    margin:0;
    padding-right: 5px;
    padding-right: 5px;
    padding-bottom: 15px;
}

Answer 5

Generally speaking, you are looking for

margin-left: auto;
margin-right: auto;

to horizontally centre a block level element within its container.

Please aware though, that you will complicate matters by adding float and position to its containing block, so try to avoid those unless you really need them.

Answer 6

You can try something like this

<!--Front page image and text-->
    <div class="container">
      <figure>
        <img src="http://lorempicsum.com/futurama/350/200/1" alt="Church" width="400" height="200">
        <div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
        </div>
      </figure>
    </div>

CSS

/* image and text setup container */
.container {
position: relative;
width: 100%;
}

.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
color: #fff;
right: 80px;
font-size: 18px;
}
figure { position: relative; width: 400px; margin: auto; /* the width of your image */}
img { 
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}

I've added a figure and position the text in absolute position relative to this tag instead of the .container