Show a text in center location before an image

Question

I have this HTML:-

<hr>
    <div style='display:flex;align-items:center'>
    <span style=''><b>Device and Operating System Selection</b></span>
    <img style='height:200px;width:120px'src='https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg'/><br/>
    </div>
    We offer 2 types of devices

where the result will be as follow:-

[![enter image description here][1]][1]

while i am trying to show the text in the middle of the picture and not on top of item , as follow:-

Consider to use figcaption instead using span [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption) — Sfili_81, Nov 16 '21 at 15:58
@Diwyansh i want the text to be show in the middle not in the bottom of the picture.. check my edit — John John, Nov 16 '21 at 16:01
i've insert your code into the SO snippet and the output is the desired result.... — Sfili_81, Nov 16 '21 at 16:03

Vikash PR · Answer 1 · 2021-11-16T16:11:45.503

0

You just have to change add justify-content: center; that will align the text in center vertically. align-items:center; is to align the items center horizontally.

<div style='display:flex;align-items:center;justify-content: center;'>
        <span style=''><b>Device and Operating System Selection</b></span>
        <img style='height:200px;width:120px'
            src='https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg' /><br />
    </div>

edited Nov 16 '21 at 16:11

answered Nov 16 '21 at 16:01

Vikash PR

66
7

using `flex-direction:column` did not have any effect in my case – John John Nov 16 '21 at 16:03
to align it center vertically use `justify-content: center;`, it will work fyn. – Vikash PR Nov 16 '21 at 16:05
`justify-content: center; `did not work eiter – John John Nov 16 '21 at 16:08
did you add `justify-content: center; ` in the div ? – Vikash PR Nov 16 '21 at 16:09

Posandu · Answer 2 · 2021-11-16T16:02:25.247

-1

Easy ;D

<hr>
<div style="display:flex;align-items:center;">
  <span><b>Device and Operating System Selection</b></span>
  <img style="height:200px;width:120px" src="https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg"><br>
</div>
We offer 2 types of devices

edited Nov 16 '21 at 16:02

answered Nov 16 '21 at 15:54

Posandu

525
6
18

3

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Nov 16 '21 at 15:55
1

Sure @Sfili_81 I'll edit – Posandu Nov 16 '21 at 15:56
@ŕ̷͉ge̸ḓ̶̅i̷t i want the text to be show in the middle not in the bottom of the picture.. check my edit – John John Nov 16 '21 at 16:00
@johnGu Updated answer – Posandu Nov 16 '21 at 16:03

Diwyansh · Answer 3 · 2021-11-16T16:05:15.370

-2

you can assign align-self style to your span

<div style='display:flex;align-items:center'>
<span style='align-self:center; margin-right:10px;'><b>Device and Operating System Selection</b></span>
<img style='height:200px;width:120px'src='https://i.gadgets360cdn.com/products/large/iqoo-3-db-386x800-1582613523.jpg'/><br/>
</div>
We offer 2 types of devices

edited Nov 16 '21 at 16:05

answered Nov 16 '21 at 15:57

Diwyansh

2,961
1
7
11

i want the text to be show in the middle not in the bottom of the picture.. check my edit – John John Nov 16 '21 at 16:01
check my updated answer – Diwyansh Nov 16 '21 at 16:06
did not work in my case – John John Nov 16 '21 at 16:12
1

I have used same code as yours and attached screenshot also then how could it be possible? it means you are not using the same code? – Diwyansh Nov 16 '21 at 16:14

Show a text in center location before an image

3 Answers3