如何使用 div 标签对齐 html 中的文本？ [复制]答案

【问题标题】：How to align text in html using div tag? [duplicate]如何使用 div 标签对齐 html 中的文本？ [复制]
【发布时间】：2017-06-18 02:23:41
【问题描述】：

我想对齐左上角图像右侧的“监控工程仪表板”文本。现在在图片下方（请参见下图）

<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

请建议文本“Monitoring Engineering Dashboard could be align on the left of Image

【问题讨论】：

标签： html css text-align

【解决方案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>

【讨论】：

【解决方案2】：

见我的jsfiddle demo。

通过您使用 col-sm-* 和 col-md-* 类名，我假设您使用的是 Twitter Bootstrap CSS Grid。

不过，我注意到您的工作存在一些问题。你有一个 style="width: 700px;"和

上的“col-sm-8”类。您还尝试在上使用“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>

【讨论】：