0

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:

enter image description here

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!

tmighty
  • 9,293
  • 20
  • 90
  • 192

2 Answers2

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>
Laif
  • 2,235
  • 1
  • 6
  • 22
  • @tmighty just replace ‘
    ’ with that code, and don’t forget to mark the question as answered     – Laif 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` – Laif Jan 31 '20 at 01:56
  • @tmighty I suggest you read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Laif Jan 31 '20 at 01:58
-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>
Rob
  • 14,107
  • 28
  • 46
  • 64
DarticCode
  • 62
  • 4