What is the best way to position an image in the center with text aligned to the left or right below it?

Question

What is the best way to position an image in the center with text aligned to the left or right below it?

Having trouble aligning an image and text beneath it? I'm able to center both the image and text, but things get messy when I try to move the text left or right. The text ends up overflowing outside of the image boundary and I can't figure out how to keep it contained.

Here's my current HTML setup:

<p align="center"><img src="/someimage.jpg" height="300" width="600">
    <b>text under it</b></p>

I've tried wrapping the text in a span and floating it left or right, but that just causes it to extend past the image. Any suggestions on how to properly contain the text within the image border?

html css

Answer 1

Answer №1

Is this what you had in mind?

I have applied the style display: flex to the wrapper and then used flex-direction: column to ensure that they are arranged in a column layout rather than a row.

You can adjust the text-align property on the b element to your preference (left, center, or right).

p {
  display: flex;
  flex-direction: column;
  width: 600px;
  margin: auto;
}

img {
  width: 600px;
  height: 150px;
}

b {
  text-align: left;
}

<p align="center"><img src="http://via.placeholder.com/600x150">
  <b>text under it</b></p>

Answer 2

Is this what you had in mind?

I have applied the style display: flex to the wrapper and then used flex-direction: column to ensure that they are arranged in a column layout rather than a row.

You can adjust the text-align property on the b element to your preference (left, center, or right).

p {
  display: flex;
  flex-direction: column;
  width: 600px;
  margin: auto;
}

img {
  width: 600px;
  height: 150px;
}

b {
  text-align: left;
}

<p align="center"><img src="http://via.placeholder.com/600x150">
  <b>text under it</b></p>

Answer 3

Answer №2

Does this meet your requirements? Take a look at the JSFiddle provided below:

img {display: block;}

https://jsfiddle.net/ybq3d692/

Answer 4

Does this meet your requirements? Take a look at the JSFiddle provided below:

img {display: block;}

https://jsfiddle.net/ybq3d692/

Answer 5

Answer №3

By placing both the image and text inside a parent div with the same width as the image itself, you can easily align the text using the text-align property. Whether you want to center, left-align, or right-align the text, simply apply the corresponding value.

For a visual reference, check out this example on JSFiddle: https://jsfiddle.net/e653vfdk/2/

/* Here is the HTML */

<div class="container">
  <div class="holder">
    <img src="https://www.bmw.com.mt/content/dam/bmw/common/all-models/4-series/gran-coupe/2017/images-and-videos/images/BMW-4-series-gran-coupe-images-and-videos-1920x1200-12.jpg.asset.1519121502869.jpg" class="img1">
    <div class="text">Lorem Ipsum is simply dummy text of the printing </div>
  </div>
</div>

/* And here is the CSS */

.container
{
  border: 1px solid;
  padding: 20px;
}

.img1
{
  width: 500px;
  height: 500px;
}

.holder
{
  width: 500px;
  margin: 0 auto;
}

.text {
   /* Uncomment any of the below 3 lines to see the text left-aligned, right-aligned, or center-aligned based on your preference */
   text-align: left;
  /* text-align: right; */
  /* text-align: center; */
}

Answer 6

By placing both the image and text inside a parent div with the same width as the image itself, you can easily align the text using the text-align property. Whether you want to center, left-align, or right-align the text, simply apply the corresponding value.

For a visual reference, check out this example on JSFiddle: https://jsfiddle.net/e653vfdk/2/

/* Here is the HTML */

<div class="container">
  <div class="holder">
    <img src="https://www.bmw.com.mt/content/dam/bmw/common/all-models/4-series/gran-coupe/2017/images-and-videos/images/BMW-4-series-gran-coupe-images-and-videos-1920x1200-12.jpg.asset.1519121502869.jpg" class="img1">
    <div class="text">Lorem Ipsum is simply dummy text of the printing </div>
  </div>
</div>

/* And here is the CSS */

.container
{
  border: 1px solid;
  padding: 20px;
}

.img1
{
  width: 500px;
  height: 500px;
}

.holder
{
  width: 500px;
  margin: 0 auto;
}

.text {
   /* Uncomment any of the below 3 lines to see the text left-aligned, right-aligned, or center-aligned based on your preference */
   text-align: left;
  /* text-align: right; */
  /* text-align: center; */
}

Answer 7

Answer №4

Here is my approach to solving this problem:

#wrapper {
  position: relative;
  display: block;
  width: 800px;
  margin: 0 auto;
}

#picture {
  position: relative;
  display: block;
  width: 800px;
  height: 400px;
  background-image: url("https://www.example.com/image.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#content {
  position: relative;
  display: block;
  font-size: 1.5em;
  color: blue;
}

<div id="wrapper">

<div id="picture"></div>
   <div id="content">
   Some sample text goes here 
   Some sample text goes here
   Some sample text goes here 
   Some sample text goes here
</div>

https://jsfiddle.net/abc123xyz/2/

Answer 8

Here is my approach to solving this problem:

#wrapper {
  position: relative;
  display: block;
  width: 800px;
  margin: 0 auto;
}

#picture {
  position: relative;
  display: block;
  width: 800px;
  height: 400px;
  background-image: url("https://www.example.com/image.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#content {
  position: relative;
  display: block;
  font-size: 1.5em;
  color: blue;
}

<div id="wrapper">

<div id="picture"></div>
   <div id="content">
   Some sample text goes here 
   Some sample text goes here
   Some sample text goes here 
   Some sample text goes here
</div>

https://jsfiddle.net/abc123xyz/2/

What is the best way to position an image in the center with text aligned to the left or right below it?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Transparent static navbar displayed above header image

Guide to smoothly animate dragging a component in React

Generating dynamic paragraph numbers with HTML and JavaScript

What happens when data is managed in getStaticProps and utilized in useEffect within a component?

Resizing an HTML table causes the background to break

Steps for deactivating a button based on the list's size

Tips for adding a border to a 3D pie chart in Highcharts

[Vue alert]: "Maximum" property or method is not declared in the instance but is being referenced during the rendering process

Images and CSS are functioning properly when viewed locally, but are not displaying as expected on GitHub pages

The information I input into this form is failing to be stored in the WAMP database

I'm having trouble figuring out the issue with the HTML code I wrote to include a favicon on my website

Issue with Sidebar Menu Title Display in AdminLte Interface

Adjusting the content of mat-cards to fill in blank spaces

Ways to align the `<ol>` number at the top vertically

What is the best way to enable a visible bootstrap tab to be clicked more than once?

dropdown menu center

Guide on forwarding from one HTML page to another in the local disk

Aligning bootstrap side by side fields poses a challenge when labels are missing

Modify information within a form

What is the method to close the picker when using type="datetime-local"?