图像和文字在同一行

你好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>

来源

2016-11-18 twix

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

来源

2016-11-18 20:24:31 Syden

尝试是这样的：

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

来源

2016-11-18 20:26:08 OverCoder

我不知道我这样做的方式是最传统的方式还是“最佳实践”，但它似乎对我有用。

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>

这仅仅是一个例子。你可以进一步使用柔性盒来向你的内容倾诉。

这里是一个链接到一个伟大的Flexbox的教程：A complete guide to flexbox BY CHRIS COYIER

来源

2016-11-18 20:42:31

我认为使用Flexbox，就因为这是太多，而且Flexbox的是IE <=非常兼容9 – OverCoder

谢谢你的提示！我每天都在学习更多。 –

图像和文字在同一行

回答

相关问题