CSS使下一行中的内容与上面的行对齐

Question

我正面临一个问题，下一行的文字正从Icon的正下方开始。但我希望文本在上面的文本行下面开始。

出现如下：

但看起来应该是这样的

以上标记的HTML是

<div class="column selected-category-label small-7 medium-9">
   <span id="image" class="label-image"><svg class="icon icon-418" 
    focusable="false"><use xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="#icon-418"></use></svg>&nbsp;</span>
   <span id="category" class="label-category">Lewn og gwld</span>
</div>    

CSS标记是

.selected-category-label .icon {
height: 2.5rem;
width: 2.5rem;
stroke: #012F60;
fill: #012F60;
top: 0.3125rem;
position: relative;}

.selected-category-label .icon {
  margin-left: -0.625rem;
  margin-top: -1.25rem;
}

Answer 1

这可能会有所帮助。使用两个内联块级容器并在一个上声明边距，以便设置它们之间的距离。

＆＃13;

＆＃13;

#image {
  display:inline-block;
  height:30px;
  width:100px;
  background: silver;
  }
#category {
  display:inline-block;
  margin-left:5px;
  text-align:left;
  vertical-align:top;
  width:70px;
  font-size:20px;
  }

＆＃13;

<div class="column selected-category-label small-7 medium-9">
   <div id="image" class="label-image"></div>
   <div id="category" class="label-category">Lewn ogasdasdas gwldasdasdasdasd</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这样的事情会起作用吗？

<table>
  <tr>
    <td><span id="image" class="label-image"><svg class="icon icon-418" 
focusable="false"</td>
    <td valign="bottom">Lewn og </td>
  </tr>
  <tr>
    <td></td>
    <td valign="top">gwld</td>
  </tr>
</table>