Question

我试图将图片放在一行标题旁边，两者都以粉底5为中心。示例为here。

HTML

<div class="row">
  <div class="panel small-12 column">
    <div class="row">
      <div class="small-5 column text-right">
        <img src="http://placehold.it/60x60&text=logo" />
      </div>
      <div class="small-7 column text-left">
        <h1>APP NAME</h1>
      </div>
    </div>
  </div>
</div>

在这个例子中，解决方案并不理想，因为它并不完全特别放在大屏幕上。

我也尝试过这样的事情：

HTML

<div class="row">
    <div class="panel small-12 column text-center">
      <img src="http://placehold.it/60x60&text=logo" />
      <h1>APP NAME</h1>
    </div>
</div>

但它不起作用：图像不是居中的。在Foundation 5中如何做到这一点的最佳方法是什么？

Answer 1

由于img是内嵌元素而h1是块元素，因此您应该将图像放在标题内。 See the JSFiddle demo.

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>

<div class="row">
  <div class="panel small-12 column text-center">
    <h1><img src="http://placehold.it/60x60&text=logo" alt="" /> APP NAME</h1>
  </div>
</div>

＆＃13;

此外，alt是必需属性，因此我添加了一个空值。

如何将图像放置在基础5中心的文本旁边？

1 个答案: