ロゴpngの画像のすぐ隣に位置するテキスト

Question

私は、cssを使用してロゴの横に「テキスト」を配置する方法を理解しようとしています。下のスクリーンショットを参照してください。ロゴの横に「John Doe、DDS」というテキストを配置するにはどうすればよいですか？助けてください、私はCSSの初心者です。ありがとうございます。

Answer 1

それは非常に複雑ではありません。あなたのロゴとテキストの両方にfloat: left;を使用できます。

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を追加することができます：それはあなたがこのような何かを得るので、それらの周りdivを作るために最も適しています.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>