在同一行html对齐元素答案

【问题标题】：Align elements on the same line html在同一行html对齐元素
【发布时间】：2014-09-17 16:44:14
【问题描述】：

我想将“标题”标签与同一作品上的其他跨度标签对齐。我试过 display: inline-block 但它没有用。我怎样才能做到？谢谢。

<div class="panel panel-default">
        <div class="panel-heading">
            Title
        </div>
        <div class="panel-body">
            <div class="row" >
                <div class="col-sm-3">
                    <label>Header</label>
                </div>
                <div class="col-sm-9">
                    <h4><span class="label label-success">Success</span>
                    <span class="label label-info">Info</span>
                    <span class="label label-warning">Warning</span>
                    <span class="label label-danger">Danger</span></h4>
                </div>
            </div>
        </div>
    </div>

http://plnkr.co/edit/uct0S6PDIXpNbDCd1p1K?p=preview

【问题讨论】：

看起来您正在使用引导程序。确保 bootstrap 不会覆盖 display: inline 与 display: 块的默认跨度样式。如果是，则在您的自定义 css 中覆盖它

标签： html css label vertical-alignment

【解决方案1】：

从 col-sm-3 div 中剪切标题标签并粘贴到 col-sm-9 和其他跨度标签中。然后所有将按相同的顺序对齐。

【讨论】：

【解决方案2】：

使用下面的css。

.logo-head {
line-height: 39px;
margin: 0 !important;
}

给标签添加类

<label class="logo-head">Header</label>

【讨论】：

【解决方案3】：

在你的代码中添加这段 CSS 就可以了

.col-sm-3 { display: table; float:left;    height:40px;}
.col-sm-9 { display: table; float:left; }
.col-sm-3  > label , h4 > span { display: table-cell; vertical-align: middle; }

Demo

【讨论】：

【解决方案4】：

您似乎正在使用 Bootstrap，然后确保您没有覆盖 bootstrap.css 或 bootstrap.min.css，以供参考工作代码如下，如果您正在寻找移动浏览器，则需要编辑标准 Bootstrap CSS 文件 bootstrap.css 或将以下行添加到 HTML 代码中的 head(style) 标记中，工作示例如下：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/>
<style>
.row
{
  display:flex;
}
}
</style>
  </head>

  <body>
   <div class="panel panel-default">
        <div class="panel-heading">
            Title
        </div>
        <div class="panel-body">
            <div class="row" style="dispay: block;" >
                <div class="col-sm-3">
                    <label style="padding-top:10px;">Header</label>
                </div>
                <div class="col-sm-9">
                    <h4><span class="label label-success">Success</span>
                    <span class="label label-info">Info</span>
                    <span class="label label-warning">Warning</span>
                    <span class="label label-danger">Danger</span></h4>
                </div>
            </div>
        </div>
    </div>
  </body>

</html>

【讨论】：

【解决方案5】：

像这样？ http://plnkr.co/edit/q2hxlWnTP9BLSnhIKd6M?p=preview

由于无法编辑您的 CSS 文件，我添加了以下内联 CSS：

<div class="col-sm-3" style="float:left ; padding-top:12px">

干杯！

辛西娅

【讨论】：