圖片和文字在同一行

Question

您好Stackoverflow社區，我是html的新手，我正在一個網站上練習我有一個狀態圖像，它旁邊應該是文本，但位於圖像高度的中心或類似http://prntscr.com/d8zxht的位置這是我的網站鏈接www.sheetmulching.com/karios

如您所見，它沒有顯示為圖像，我該怎么辦？ 您可以通過檢查網站上的元素來檢查代碼

這是一個小片段

 .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> 

Answer 1

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

Answer 2

嘗試這樣的事情：

 #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> 

Answer 3

我不知道我的操作方式是最常規的方式還是“最佳實踐”，但是它似乎對我有用。

 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> 

這只是一個例子。 您可以進一步使用flex box，使其適應您的需求。

這是一個很棒的flexbox教程的鏈接：flexbox 的完整指南BY CHRIS COYIER