CODEWITHSUNDEEP
htmlcss
twix
twix

Reputation: 45

Image and text on the same line

Hello Stackoverflow community, i am kind of new to html and i am practicing on a website i have a status image and beside it should be text but on the center of the image height or something like this http://prntscr.com/d8zxht here is my website link www.sheetmulching.com/karios

as you see it is not displayed as the image what should i do? you can check the code by inspecting the element on the website

and here is a small snippet

.onlinepersons { 
  margin-top:150px;
}
.onlinepersons li { 
  border-bottom: solid 1px #2e263d; 
  padding-bottom: 2px; 
  overflow: hidden;
}

.date { 
  color:#3b87c6; 
}

.bordernone {
  border: none !important;
}
<ul class="onlinepersons">
  <li class="bordernone">
    <img src="images/blue.png">
    <span class="date">13:17 - 32.13.2017</span>
  </li>
</ul>

Upvotes: 2

Views: 3731

Answers (3)

Matthew LeFevre
Matthew LeFevre

Reputation: 21

I don't know if the way I do it is the most conventional way or the "best practice" however it seems to work for me. 

li{
    background-color: #b7b7b7;
    width: 10em;
    padding: 6px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
 
  <!--There are a lot of great things that can be done with flexbox I don't know if this is the best use for this but it is an option-->
  }

img{
       background-color: #000044;
       width: 20px;
       height: 20px;
        }
<ul>
  <li><img src="#"><span>text</span></li>
 </ul>

This is just one example. You can use flex box further to tweek it to your hearts content.

Here is a link to a great flexbox tutorial: A complete guide to flexbox BY CHRIS COYIER

Upvotes: 0

OverCoder
OverCoder

Reputation: 1603

Try something like this:

#icon, #text {
    display:inline; /* prevent elements from using full line block each on their own */
}

#text {
    line-height: 20px; /* set this to your image's height */
    vertical-align: top; /* center the text vertically along with the image */
    margin-left: 8px; /* optional margin */
}
<!-- Just a simple example -->
<div>
    <img src="https://www.gravatar.com/avatar/8f73ebf566fbc01ea36841232f694114?s=32&d=identicon&r=PG&f=1" height="20" width="20" id="icon">
    <p id="text">
        twix
    </p>
</div>

Upvotes: 0

Syden
Syden

Reputation: 8625

.bordernone>img {
   vertical-align: middle;
   margin-top: -1px;
}

Upvotes: 4

Related Questions