Tips for aligning the image and text in the center of the page

Question

Tips for aligning the image and text in the center of the page

Struggling to center this image on my website. I've attempted various methods like margin: 0 and absolute positions, but nothing seems to work. Being a beginner in html and css doesn't help either. My attempts to center it have been futile.

The challenge is to keep the image centered even when the site window width changes, rendering padding ineffective.

My CSS code:

/* 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 Code:

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

Currently, the image appears like this:

html css image center

Answer 1

Answer №1

If you're looking to create a layout similar to this example

<!--Code for 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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
      </figure>
    </div>

CSS Styles

/* Styles for image and text 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; /* adjust according to your image size */}
img { 
padding-right: 5px;
padding-left: 5px;
padding-bottom: 15px;
}

The text is positioned within a figure element using absolute positioning relative to the tag.

Answer 2

If you're looking to create a layout similar to this example

<!--Code for 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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
      </figure>
    </div>

CSS Styles

/* Styles for image and text 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; /* adjust according to your image size */}
img { 
padding-right: 5px;
padding-left: 5px;
padding-bottom: 15px;
}

The text is positioned within a figure element using absolute positioning relative to the tag.

Answer 3

Answer №2

When aiming to horizontally center a block level element within its container, the most effective method is often

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

It's important to note, however, that introducing float and position properties to the containing block can complicate the layout unnecessarily, so it's best to avoid them unless necessary.

Answer 4

When aiming to horizontally center a block level element within its container, the most effective method is often

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

It's important to note, however, that introducing float and position properties to the containing block can complicate the layout unnecessarily, so it's best to avoid them unless necessary.

Answer 5

Answer №3

When it comes to styling that specific markup, I recommend experimenting with the following CSS styles.

.wrapper {
    width: 80%;
}

.textimage {
    width: 7%;
    font-size: 20px;
    margin-left: 10px;
}

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

Answer 6

When it comes to styling that specific markup, I recommend experimenting with the following CSS styles.

.wrapper {
    width: 80%;
}

.textimage {
    width: 7%;
    font-size: 20px;
    margin-left: 10px;
}

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

Answer 7

Answer №4

Your code contains numerous errors and unnecessary lines. I suggest delving into some HTML and CSS resources to enhance your skills.

One way to simplify your issue is by using an image wrapper .image_wrapper to center images and text within 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>

Give it a try!

https://jsfiddle.net/r1rh7wn4/

Answer 8

Your code contains numerous errors and unnecessary lines. I suggest delving into some HTML and CSS resources to enhance your skills.

One way to simplify your issue is by using an image wrapper .image_wrapper to center images and text within 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>

Give it a try!

https://jsfiddle.net/r1rh7wn4/

Answer 9

Answer №5

Consider enclosing your image and its accompanying text within a <div> tag to isolate it from the surrounding page content. This will also enable you to center both elements, regardless of the page's width. Here's a demonstration:

Example Link

.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-bottom: 15px;
}
.imagecontainer .imagetext {
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

<div class="container">
  <p>Sample text here.</p>
  <div class="imagecontainer">
    <img src="sample-image.jpg" alt="Sample Image" />
    <div class="imagetext">Image text goes here</div>
  </div>
  <p>Additional text content.</p>
</div>

If you prefer the image text to be centered below the image:

Centered Text Example Link

.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-bottom: 15px;
}
.imagecontainer .imagetext {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}

<div class="container">
  <p>Sample text here.</p>
  <div class="imagecontainer">
    <img src="sample-image.jpg" alt="Sample Image" />
    <div class="imagetext">Centered image text</div>
  </div>
  <p>Additional text content.</p>
</div>

Answer 10

Consider enclosing your image and its accompanying text within a <div> tag to isolate it from the surrounding page content. This will also enable you to center both elements, regardless of the page's width. Here's a demonstration:

Example Link

.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-bottom: 15px;
}
.imagecontainer .imagetext {
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

<div class="container">
  <p>Sample text here.</p>
  <div class="imagecontainer">
    <img src="sample-image.jpg" alt="Sample Image" />
    <div class="imagetext">Image text goes here</div>
  </div>
  <p>Additional text content.</p>
</div>

If you prefer the image text to be centered below the image:

Centered Text Example Link

.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-bottom: 15px;
}
.imagecontainer .imagetext {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}

<div class="container">
  <p>Sample text here.</p>
  <div class="imagecontainer">
    <img src="sample-image.jpg" alt="Sample Image" />
    <div class="imagetext">Centered image text</div>
  </div>
  <p>Additional text content.</p>
</div>

Answer 11

Answer №6

To center your image, simply apply the CSS properties "display:block;" and "margin:0 auto;".

/* styling for image and text 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 these properties to center the image */
     display:block;
     margin:0 auto;
  /* add these properties to center the image */
  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 12

To center your image, simply apply the CSS properties "display:block;" and "margin:0 auto;".

/* styling for image and text 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 these properties to center the image */
     display:block;
     margin:0 auto;
  /* add these properties to center the image */
  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>

Tips for aligning the image and text in the center of the page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Leaflet OSM: Adjust map focus to the polygon's center

Scaling Vuetify icons dimensions

Navigation problems resolved: The fixed-top class causes issues with navbar-right and obscures the logo

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

Tips for eliminating the flash of color upon website loading

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

How can I use jQuery to vertically align an element?

What is the best way to dynamically change the main content based on the sidebar option chosen in a React application?

The HTML element <p> is not spilling over onto a new line

CSS styling for the dropdown list in the content/option section

Retrieve a div element using two specific data attributes, while excluding certain other data attributes

Modify request parameters in real-time using JavaScript

Tips for changing the style ID depending on the variable value

Adjust the ZIndex on a div through interactive clicking

Switching up the default font style within TinyMCE

Guidance on creating a custom color selection tool for a specific task

creating a table displaying data in a horizontal format sourced from ajax/json transformation

Reveal Content once you give us a thumbs up on Facebook

An HTML table featuring rows and columns that can be adjusted in size separately from the content within each cell

Issue with MaterializeCSS: Unable to add new options to select menu