私は、cssを使用してロゴの横に「テキスト」を配置する方法を理解しようとしています。下のスクリーンショットを参照してください。ロゴの横に「John Doe、DDS」というテキストを配置するにはどうすればよいですか?助けてください、私はCSSの初心者です。ありがとうございます。ロゴpngの画像のすぐ隣に位置するテキスト
0
A
答えて
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
テキストをスクリーンショット内の位置に表示する場合は、
+0
明確な説明をお寄せいただき、ありがとうございます。 –
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>
+0
ありがとう、あなたのソリューションは完璧に動作します! –
関連する問題
- 1. 位置画像とテキスト
- 2. CSS - 画像を中央揃えのテキストの隣に配置
- 3. textViewの位置に基づいて画像にテキストを配置する
- 4. jtableに画像の隣にテキストを追加するには?
- 5. タイムラインアプリのロゴ画像
- 6. 星評価画像をテキストラベルの隣に配置する方法
- 7. 浮動画像の隣にテーブルを配置する
- 8. ギャラリー位置を特定の画像位置でロードする
- 9. フェード画像位置
- 10. 位置スプライト画像
- 11. 画像位置スライド
- 12. 画像ビューの位置
- 13. 画像の絶対位置?
- 14. Delphi tbutton画像の位置
- 15. テキストの開始位置から中間の位置に画像を移動する方法は?
- 16. JavaのPNG画像にテキストを保存する
- 17. CSS絶対位置のない画像上のテキスト(幅100%)
- 18. SWTボタンのテキストと画像の位置合わせ?
- 19. CSSとjavascriptのテキストと画像の位置付け
- 20. Excelで画像の位置を探す
- 21. 画像ロゴの比較
- 22. tesseractの画像からテキストの正確な位置を取得する
- 23. 位置決め画像、
- 24. Magento - 画像をトップカテゴリのメニュー名の隣に配置
- 25. 画像の位置を他の画像の上に置いておく
- 26. リサイズ時に画像と同じ位置にテキストを置く方法は?
- 27. ブートストラップ - 近隣の画像スライダー|下にテキストを追加
- 28. 画像の中にテキストを配置
- 29. Css要素を別の要素のすぐ隣に配置
- 30. pandocの画像の位置合わせ
これまでに何を試しましたか?これはさまざまな方法で行うことができますが、私は[css floats](http://www.w3schools.com/css/css_float.asp)を調べることをお勧めします。考え方は、ロゴを左に浮かべて、テキストを横に移動させることです(次のDOM要素と仮定して)。 –