divタグを使用してhtmlでテキストを揃える方法は？

Question

左上の画像の右側に「モニタリングエンジニアリングダッシュボード」のテキストを揃えたいとします。これは今の画像の下にある

<div style="width:1200px; margin:0 auto;"> 
 
    <div class="row" style="margin:10px 0px 0px 0px;"> 
 
    <img alt="DDP" class="col-md-4" style="width:140px; height:60px;" src="logo.png" /> 
 
    <h1 class="col-md-8" style="width:700px;">Monitoring Engineering Dashboard</h1> 
 
    </div>

Output of the HTML

は「エンジニアリングダッシュボードを監視するテキストは画像の左側に揃えることができる方法を提案してください（画像の下を参照してください）

Answer 1

h1タグは、displayがデフォルトでblockである要素です。これは、それが独自の行に配置されることを意味します。ディスプレイをinlineまたはinline-blockに設定すると、この問題が解決されます。

<div style="width:1200px; margin:0 auto;"> 
 
    <div class="row" style="margin:10px 0px 0px 0px;"> 
 
    <img alt="DDP" class="col-md-4" style="width:140px; height:60px;" src="logo.png" /> 
 
    <h1 class="col-md-8" style="width:700px;display:inline;">Monitoring Engineering Dashboard</h1> 
 
    </div>

Answer 2

私jsfiddle demoを参照してください。

あなたはcol-sm- *とcol-md- *クラス名を使用しているので、私はあなたがTwitter Bootstrap CSS Gridを使用していると仮定します。

私はあなたの仕事にいくつかの問題を感じました。あなたはstyle = "width：700px;"あなたの<h1>に「col-sm-8」クラスがあります。また、<img>では、<div>というラッピングではなく、「col-md-4」クラスを使用してみました。

私は私のバイオリンのコード、およびBootstrap CSS Grid docs（下にスクロールしてコードのサンプルを見てください。）

HTML

<h2>Example 1</h2> 
<p>2-column grid, using Bootstrap CSS Grid (12-column grid). <strong>col-sm-4, col-sm-8</strong></p> 
<hr> 
<div class="container" style="margin:0 auto;"> 
    <div class="row"> 
     <div class="col-sm-4"> 
      <img alt="DDP" style="width:140px; height:60px;" src="logo.png" /> 
     </div> 
     <div class="col-sm-8"> 
      <h1>Monitoring Engineering Dashboard</h1> 
     </div> 
    </div> 
</div> 
<hr> 

<h2>Example 2</h2> 
<p>2-column grid. Tip: Adjust your browser window to see in real-time the side-by-side layout activate, for col-md-* grid sizing. This also means that if your browser window is anything under 991px, then the column layout will display the columns as stacked blocks (rows). <strong>col-md-4, col-md-8</strong></p> 
<hr> 
<div class="container" style="margin:0 auto;"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <img alt="DDP" style="width:140px; height:60px;" src="logo.png" /> 
     </div> 
     <div class="col-md-8"> 
      <h1>Monitoring Engineering Dashboard</h1> 
     </div> 
    </div> 
</div> 
<hr> 

<h2>Example 3</h2> 
<p> 
2-column grid, flipped. <strong>col-sm-8, col-sm-4</strong> 
</p> 
<hr> 
<div class="container" style="margin:0 auto;"> 
    <div class="row"> 
     <div class="col-sm-8"> 
      <h1>Monitoring Engineering Dashboard</h1> 
     </div> 
     <div class="col-sm-4"> 
      <img alt="DDP" style="width:140px; height:60px;" src="logo.png" /> 
     </div> 
    </div> 
</div> 
<hr> 

にあなたを参照することになり