如何使用div標籤在html中對齊文本？

Question

我想在左上角的圖像右側對齊「監控工程dashboad」文本。這是目前圖像下方（請參見下圖）

<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

A 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- * classnames，我假設你使用的是Twitter Bootstrap CSS Grid。

雖然我注意到你的工作有幾個問題。你有一個style =「width：700px;」和您的<h1>上的「col-sm-8」課程。您還嘗試在您的<img>上使用「col-md-4」類，而不是在包裝<div>上使用它。

我想請您看看我的小提琴代碼和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>