How to centrally align an image with HTML tags <p></p>

Question

How to centrally align an image with HTML tags <p></p>

https://i.sstatic.net/iTBOI.jpg

I need help with HTML alignment for my website

How can I center align the text with the image?

#main__img {
    text-align: center;
    height: 80%;
    width: 80%;
}

.main__content p {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;
}

<img id="#main__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb3FlgJlyfSfAyDxdt6bGxrG4fOxz2sIEOog&usqp=CAU" />

<div class="main__content">
<p> Visualizing Abolition maps the suppression of the African slave trade by tracing nearly 31,000 records of correspondence exchanged between the British Foreign Office and British commissioners, ministers, naval officers, and representatives of foreign governments around the world over the course of the nineteenth century. It provides users with three resources. First, a database that lists the names of the senders, recipients, places of origin and destination, dates, as well as the subject of the letters when available. Second, essays exploring different topics related to the suppression of the traffic. Finally, a gallery of images that provides visual context for the information available on the website. These resources allow students and researchers to further understand the history of the suppression of the African slave trade and expand our knowledge of the largest coerced migration in history. </p>
</div>

javascript html css jekyll

Answer 1

Answer №1

The ideal HTML tool for this task is the figure element. It consists of a display element (usually an image but can be anything) and a figcaption, typically the first or last child of the figure element, containing text related to the image.

Figures are useful for grouping visual elements with descriptions or accompanying text that can all be styled together. To achieve the desired styling, simply apply a text-align: center and margin: 0 auto to center the figure on the page.

figure  {
    width: 80%;
    margin: 0 auto;
    text-align: center
}


figcaption {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;
}

<figure>
  <img id="#main__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb3FlgJlyfSfAyDxdt6bGxrG4fOxz2sIEOog&usqp=CAU" />
  <figcaption>
    <p> Visualizing Abolition maps the suppression of the African slave trade by tracing nearly 31,000 records of correspondence exchanged between the British Foreign Office and British commissioners, ministers, naval officers, and representatives of foreign governments around the world over the course of the nineteenth century. It provides users with three resources. First, a database that lists the names of the senders, recipients, places of origin and destination, dates, as well as the subject of the letters when available. Second, essays exploring different topics related to the suppression of the traffic. Finally, a gallery of images that provides visual context for the information available on the website. These resources allow students and researchers to further understand the history of the suppression of the African slave trade and expand our knowledge of the largest coerced migration in history. </p>
  </figcaption>
<figure>

Answer 2

The ideal HTML tool for this task is the figure element. It consists of a display element (usually an image but can be anything) and a figcaption, typically the first or last child of the figure element, containing text related to the image.

Figures are useful for grouping visual elements with descriptions or accompanying text that can all be styled together. To achieve the desired styling, simply apply a text-align: center and margin: 0 auto to center the figure on the page.

figure  {
    width: 80%;
    margin: 0 auto;
    text-align: center
}


figcaption {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;
}

<figure>
  <img id="#main__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb3FlgJlyfSfAyDxdt6bGxrG4fOxz2sIEOog&usqp=CAU" />
  <figcaption>
    <p> Visualizing Abolition maps the suppression of the African slave trade by tracing nearly 31,000 records of correspondence exchanged between the British Foreign Office and British commissioners, ministers, naval officers, and representatives of foreign governments around the world over the course of the nineteenth century. It provides users with three resources. First, a database that lists the names of the senders, recipients, places of origin and destination, dates, as well as the subject of the letters when available. Second, essays exploring different topics related to the suppression of the traffic. Finally, a gallery of images that provides visual context for the information available on the website. These resources allow students and researchers to further understand the history of the suppression of the African slave trade and expand our knowledge of the largest coerced migration in history. </p>
  </figcaption>
<figure>

Answer 3

Answer №2

Make sure to include the following CSS code snippet:


.main__content {
    width: 100%;
}
.main__content p {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;
    width: 80%;
    margin: 0 auto;
}

This will ensure that the paragraph width matches the image and equal margins are set on both sides.

Alternatively, you can place both the image and paragraph in the same container to minimize style issues:

<div class="container">
  <img ...>
  <p>asdfsdfsdf</p>
</div>

Then apply the following styles:

div.container {
  width: 80%;
  margin: 0 auto;
}
div.container img {
  width: 100%;
}
div.container p {
  width: 100%;
}

Answer 4

Make sure to include the following CSS code snippet:


.main__content {
    width: 100%;
}
.main__content p {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;
    width: 80%;
    margin: 0 auto;
}

This will ensure that the paragraph width matches the image and equal margins are set on both sides.

Alternatively, you can place both the image and paragraph in the same container to minimize style issues:

<div class="container">
  <img ...>
  <p>asdfsdfsdf</p>
</div>

Then apply the following styles:

div.container {
  width: 80%;
  margin: 0 auto;
}
div.container img {
  width: 100%;
}
div.container p {
  width: 100%;
}

Answer 5

Answer №3

Ensure both containers have equal width and apply margin-left/right = "auto".

#main__img {
    height: auto;
    width: 80%;
    display: block;

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

.main__content p {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;

    width: 80%;
    margin-left:auto;
    margin-right: auto;
}

<div class="main__content">
<img id="main__img" src="https://upload.wikimedia.org/wikipedia/commons/0/08/Astronotus_ocellatus.jpg" />

<p> Visualizing Abolition maps the suppression of the African slave trade by tracing nearly 31,000 records of correspondence exchanged between the British Foreign Office and British commissioners, ministers, naval officers, and representatives of foreign governments around the world over the course of the nineteenth century. It provides users with three resources. First, a database that lists the names of the senders, recipients, places of origin and destination, dates, as well as the subject of the letters when available. Second, essays exploring different topics related to the suppression of the traffic. Finally, a gallery of images that provides visual context for the information available on the website. These resources allow students and researchers to further understand the history of the suppression of the African slave trade and expand our knowledge of the largest coerced migration in history. </p>
</div>

Answer 6

Ensure both containers have equal width and apply margin-left/right = "auto".

#main__img {
    height: auto;
    width: 80%;
    display: block;

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

.main__content p {
    margin-top: 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 400;

    width: 80%;
    margin-left:auto;
    margin-right: auto;
}

<div class="main__content">
<img id="main__img" src="https://upload.wikimedia.org/wikipedia/commons/0/08/Astronotus_ocellatus.jpg" />

<p> Visualizing Abolition maps the suppression of the African slave trade by tracing nearly 31,000 records of correspondence exchanged between the British Foreign Office and British commissioners, ministers, naval officers, and representatives of foreign governments around the world over the course of the nineteenth century. It provides users with three resources. First, a database that lists the names of the senders, recipients, places of origin and destination, dates, as well as the subject of the letters when available. Second, essays exploring different topics related to the suppression of the traffic. Finally, a gallery of images that provides visual context for the information available on the website. These resources allow students and researchers to further understand the history of the suppression of the African slave trade and expand our knowledge of the largest coerced migration in history. </p>
</div>

Answer 7

Answer №4

Give this a shot

.main__content {
   padding: 15px;
}

Answer 8

Give this a shot

.main__content {
   padding: 15px;
}

How to centrally align an image with HTML tags <p></p>

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The PHP file is encountering issues with running the script

Issue encountered when attempting to update a specific element within an array using Mongoose

I need to print out a table, but when I preview the print, I want to rotate the entire page for better visibility

The `.babelrc` file is unable to locate presets within a nested node_modules directory

Calculator app with Next.js: Using keyboard input resets the current number state in real-time

The onclick button in React is not triggering

Issues with missing data in Selenium Python

New to jQuery: struggling with click event and CSS... What am I missing here?

What is the importance of using $scope.$apply after assigning values to ng-model within forms?

Remove unnecessary margins from grid layout

The function Router.use is looking for a middleware function, but instead received an object in node.js /

Encountering obstacles as a novice trying to master CSS styling techniques

Tips for converting Numbers or JSON to strings while exporting data to an Excel spreadsheet in React

There is an issue with my HTML due to a MIME type error

Integrating Twitter bootstrap into Django version 1.5

Encountering a server issue while incorporating ejs in expressjs

Tips for dynamically resizing an image to suit any screen size, such as with Bootstrap 4

Encountered an error: [$injector:modulerr] while using AngularJS

What is the best way to display a user's profile picture on my website by pulling it from the database?

Stopping a Javascript function from running when an asp.net webform is loaded