Display Images Inline via CSS

Display Images Inline via CSS

You have a line break <br> in-between the second and third images in your markup. Get rid of that, and it'll show inline.

How do I get image and text to display inline?

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.

How to use HTML/CSS to show images and titles inline?

Here. Proper HTML and CSS.

a {

  display: inline-block;

 text-decoration: none;

  }

<div id="image">

 <a href="file:///L:/file" title="Project Reports">New Reports<br>

  <img src="http://tableau/" style="width:304px;height:228px;" /> 

  </a>      

  <a href="file:///L:/file2">Project Reports<br>

  <img src="http://tableau/" style="width:304px;height:228px;"/>

  </a>

</div>

How do I display text inline with an image?

See this simplified snippet (remove borders which are just for test):

#pic0txt {

  display: inline-block; border:1px solid red;

  text-align:center;

  vertical-align:top;

  width:48%;

}

#pic0img {

  display: inline-block; border:1px solid red; 

  width:48%;

}

<div>

  <div id="pic0txt">test</div>

  <img id="pic0img" src="https://www-asp.azureedge.net/v-2016-11-01-012/images/ui/home-free-courses.png" />

</div>

<hr/>

<div>

  <img id="pic0img" src="https://www-asp.azureedge.net/v-2016-11-01-012/images/ui/home-free-courses.png" />

  <div id="pic0txt">test</div>

</div>

---

Related Topics