CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Warrio
Warrio

Reputation: 1913

positioning text and image

How can position a picture of 30px width and 30px height with 2 lines next to it so these two lines would fit one above the other also within 30px height?

So it would look like this:

I already have Bootstrap installed if it could help.

<p>
  <img src='pic1.png' width='30' height='30'/> <a href='#'>E"nola Kuhic (wiu)</a>
  person
</p>

Upvotes: 0

Views: 31

Answers (2)

John Bupit
John Bupit

Reputation: 10618

Consider using Bootstrap's media object.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <a href="..." class="media-heading">E"nola Kuhic (wiu)</a>
    person
  </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="media">
  <div class="media-left">
    <img class="media-object" src="https://placehold.it/40x40">
  </div>
  <div class="media-body">
    <a href="#" class="media-heading">E"nola Kuhic (wiu)</a> 
    <div>person</div>
  </div>
</div>


<div class="media">
  <div class="media-left">
    <img class="media-object" src="https://placehold.it/40/AFA">
  </div>
  <div class="media-body">
    <a href="#" class="media-heading">John Doe</a> 
    <div>admin</div>
  </div>
</div>

Upvotes: 1

Serhat MERCAN
Serhat MERCAN

Reputation: 1098

<p>
  <img src='pic1.png' width='30' height='30' style='float:left;'/>
  <a href='#'>E"nola Kuhic (wiu)</a><br />
  person
</p>

Upvotes: 0

Related Questions