CSS删除图像下方的文本

Question

如何在不使用填充/边距左边的情况下将p标签对准用户名下方而不是图像下方。

代码：

<ul class="comments_list">
  <li>
      <i>
        <img src='{{image_path}}' />
      </i>
      <span>User name</span>
      <p>{{comment_text}}</p>
  </li>
</ul>

Answer 1

这是你想做的吗？你对'class =“comments_list”'的css是什么？ 您使用<i>进行斜体吗？

<ul class="comments_list">
  <li>
      <i>
        <img src=http://icons.iconarchive.com/icons/dryicons/simplistica/128/user-icon.png />
      </i>
       </li>
      </ul>
<span>User name</span>
      <p>{{comment_text}}</p>

Answer 2

如果你不介意使用flex，它可以很容易地做到：http://codepen.io/gc-nomade/pen/mPQeRM

li {
  display: inline-flex;
  flex-flow: column wrap;
  justify-content: center;
  height: 128px;
}

<ul class="comments_list">
  <li>
    <i>
        <img src=http://icons.iconarchive.com/icons/dryicons/simplistica/128/user-icon.png />
      </i>
    <span>User name</span>
    <p>{{comment_text}}</p>
  </li>
</ul>