CODEWITHSUNDEEP
css
Saamah
Saamah

Reputation: 33

How do I get image and text to display inline?

I'm a complete HTML novice and would appreciate some help with something.

I am running an online study and need to position two items next to each other (and relative to another item, but that's not relevant here it seems).

The first item is an image, the other a randomly generated number.

I have put them into one div and given the image the "display: inline" property, but the number insists on coming on the next line rather than next to the image despite there being space for it.

Can anyone help explain?

Thanks! Saamah

Here is the CSS and HTML:

.inner{
    position:absolute;
    z-index:1;
    bottom:10%;
    left:58%;
    height:12%;
    display:inline;
}
.rating{
	position:relative;
    bottom: 5%;
    color:red;
}
  <div class="inner">
    <img class="fluid2" src="//www.unipark.de/uc/EF_Erfurt_Joeckel_LS/abe0/images/Stars8.png" alt="8 Stars" />
    <div class="rating"> 34 </div>
  </div>

Upvotes: 3

Views: 956

Answers (2)

Awais
Awais

Reputation: 4912

Use flex for that i just give you example set the properties yourself. 

.inner {
    position: absolute;
    z-index: 1;
    bottom: 10%;
    left: 58%;
    height: auto;
    display: inline;
    display: flex;
    align-items: center;
}

Upvotes: 1

Nazir
Nazir

Reputation: 414

Change the div class="rating" to a span class="rating" instead, Div is a block level element and will displace the element to the next line. Span is not a block level element and will come beside the image.

Upvotes: 3

Related Questions