Question

Hello 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

我不知道我这样做的方式是最传统的方式还是最好的做法＆＃34;但它似乎对我有用。

＆＃13;

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;
        }

＆＃13;

<ul>
  <li><img src="#"><span>text</span></li>
 </ul>

＆＃13;

这只是一个例子。您可以进一步使用弹性框来调整它的内容。

这是一个很棒的flexbox教程的链接：A complete guide to flexbox BY CHRIS COYIER

图像和文字在同一行

3 个答案: