How can I center an image and place text under it to the left or right?

Question

I'm trying to center an image and put some text under it. I can get the text to the center but when I try to get it to the left or the right, it flows past the image. I'm not sure how to keep that text within the image border.

HTML:

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

I understand this centers the image but also the text but if i try to wrap the text in a span and tell it to float to the left or right, that's when it goes way past the image.

coops · Accepted Answer · 2019-02-26T15:14:26.910

2

Is this the kind of thing you are thinking of?

I've just added display: flex to the wrapper and then flex-direction: column makes sure that they are stacked in a column (not a row).

You can then change text-align property on the b to whichever you'd like (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>

edited Feb 26 '19 at 15:14

answered Feb 26 '19 at 14:15

coops

1,678
1
13
26

1

This worked perfectly for me! Thank you so much! – Brandon Feb 26 '19 at 15:32

score 1 · Answer 2 · answered Feb 26 '19 at 14:14

1

is this what you want? Look at the JSFiddle below.

img {display: block;}

https://jsfiddle.net/ybq3d692/

answered Feb 26 '19 at 14:14

Dev Bunker

127
1
10

In a sense yes. But this still keeps the text right below it. If i wanted to position the text below it but to the left, i can't get it to move. – Brandon Feb 26 '19 at 14:40
@Brandon have a look at this, https://stackoverflow.com/a/54887521/10678978 i've positioned the text to the left. – coops Feb 26 '19 at 15:12
1

@coops hey sorry I missed that! – Brandon Feb 26 '19 at 15:32
Hey man, sorry, i think i did not understand the question completely then :p – Dev Bunker Feb 27 '19 at 11:05

score 1 · Answer 3 · answered Feb 26 '19 at 14:54

Placing both the image and the text within a parent div of same width as that of image and giving any of text-align properties i.e., text-align: center or left or right will work..

for reference... 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 whatever u want*/
{
   text-align: left;
  /*  text-align: right; */
  /*    text-align: center; */
}

score 0 · Answer 4 · answered Feb 26 '19 at 14:19

This is how I would approach this question:

#container {
  position: relative;
  display: block;
  width: 600px;
  margin: 0 auto;
}

#image {
  position: relative;
  display: block;
  width: 600px;
  height: 300px;
  background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#text {
  position: relative;
  display: block;
  font-size: 2em;
  color: red;
}

<div id="container">

<div id="image"></div>
   <div id="text">
   This is some text this is some text
   This is some text this is some text
   This is some text this is some text
</div>

https://jsfiddle.net/evkg2yz6/1/

How can I center an image and place text under it to the left or right?

4 Answers4