位置文本旁邊標識PNG圖像

Question

我想弄清楚如何將我的「文本」旁邊的標誌使用CSS，請看下面的截圖。如何將徽標旁邊的文字「John Doe，DDS」定位？請幫忙，我是CSS中的新手。謝謝。

Answer 1

這不是很複雜。您可以在徽標和文字上使用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如果您希望您的文本處於屏幕截圖中的位置。

Answer 2

你可以漂浮兩個元件彼此相鄰或顯示它們爲內聯塊。由於內聯塊是內聯元素，因此它們將彼此相鄰放置。看看下面的例子：

.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>