将文本放在徽标png图像旁边

Question

我试图找出如何放置我的＆＃34;文字＆＃34;使用css在徽标旁边，请参阅下面的截图。我如何定位文本＆＃34; John Doe，DDS＆＃34;在徽标旁边？请帮忙，我是CSS的新手。谢谢。

Answer 1

您可以将两个元素彼此相邻浮动或将它们显示为内联块。由于内联块是内联元素，因此它们将彼此相邻放置。请查看以下示例：

.logo,.heading
{
  display:inline-block;
  vertical-align:middle;
}
.logo
{
  font-size: 35px;
  color: red;
  margin-right:5px;
}

<div class="logo">
  <img src="http://lorempixel.com/100/100" width="50" alt="John Doe">
</div>
<div class="heading">
  <h1>
    John Doe
  </h1>
</div>

Answer 2

这不是很复杂。您可以在徽标和文字上使用float: left;。它最好围绕它们制作div，所以你得到这样的东西：

<强> HTML

<div class='logo>
    <img src='logo.png' />
</div>
<div class='text'>
    <h1>JOHN DOE, DDS</h1>
</div>

<强> CSS

.logo{
    height: auto;
    width: auto; /* makes the div same size as content */
    float: left;
}
.text{
    height: auto;
    width: auto; /* makes the div same size as content */
    float: left; 
}

现在，如果您希望文字位于屏幕截图中的位置，您还可以向top: something添加.text。