Centered image with text on its right side

Question

I would like to have an image in my webpage. The image should be centered on the page, and it should have a text next to it on the right side like this:

My current CSS code to show an image centered is this:

.inlineimage {
text-align:center; 
width:100%;
display:block;
margin:auto;
}

And I use it like this:

<div class="inlineimage">
    <picture>
        <source
            media="(max-width: 900px)"
            srcset="images/image1.jpg">
        <img
            src="images/image2.jpg"
        alt="">
    </picture>
</div>
This is some text that should be shown on the right side of the image, but currently it's shown below the image.

How could I change my CSS code in such a way that the text is shown on the right side of the image?

Thank you!

check the second snippet here: https://stackoverflow.com/a/55393886/8620333 .. simply make the first div empty — Temani Afif, Jan 31 '20 at 00:29

Libra · Accepted Answer · 2020-01-31T01:56:54.910

2

Use a display: flex; parent positioned 50% from the left, then translate left half of the image's width.

.inlineimage {
  text-align:center; 
  width:100%;
  display:block;
  margin:auto;
}

#flex{
  margin: auto;
  display: flex;
  margin-left: 50%;
  align-items: flex-end;
  transform: translate(-100px); /* Make this half the image width */ 
}

#image{
  height: 100px;
  width: 100px;
  background-color: blue;
}

<div id="flex">
  <div id="image"></div>
  <div>
  This is some text that should be shown on the right side of the image, but currently it's shown below the image.
  </div>
</div>

edited Jan 31 '20 at 01:56

answered Jan 31 '20 at 01:19

Libra

2,544
1
8
24

@tmighty just replace ‘
’ with that code, and don’t forget to mark the question as answered – Libra Jan 31 '20 at 01:43
1

Super, thank you very much! I have replaced your
" code with my "
code, and it works. Thank you!
– tmighty Jan 31 '20 at 01:44
Could you please still show me how to make it so that the text is aligned bottom and instead of being aligned top? – tmighty Jan 31 '20 at 01:48
1

@tmighty add `align-items: flex-end` to `#flex` – Libra Jan 31 '20 at 01:56
@tmighty I suggest you read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Libra Jan 31 '20 at 01:58

score -2 · Answer 2 · edited Jan 31 '20 at 00:43

-2

/*set fixed */
.fixed{
position:fixed;
top:0%;
}

.text{
left:10%;
top:-5%;

position:fixed;
}






/*Set Size as a value to save image url by streaching data uri you don't need this code this is just so you can see it */
.size{
width:50px;
height:50px;

}

<span class = 'fixed'>
<img class ='size' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==">
</span>
<h1 class = "text">Some text</h1>

edited Jan 31 '20 at 00:43

Rob

14,746
28
47
65

answered Jan 31 '20 at 00:41

DarticCode

62
4

Thank you, but your image is shown on the left side of the screen for me, not in the middle of it. – tmighty Jan 31 '20 at 01:07
ya it supose to – DarticCode Jan 31 '20 at 01:13
But I need the image to be centered. – tmighty Jan 31 '20 at 01:14
@DarticCode Hmmm, I thought the image that I posted would make it clear, and also I wrote "The image should be centered on the page". – tmighty Jan 31 '20 at 01:21
also if you want this why dont make a svg its easy i learned how to make one off a well litterly looking at one then center the svg with the tag – DarticCode Jan 31 '20 at 01:26

Centered image with text on its right side

2 Answers2

Linked

Related