Question

我试图将徽标左侧与标题对齐，将两个徽标对齐到页面的中心，如图中所示。

这是我搜索SO并使用Chrome开发人员工具后所得到的：https://jsfiddle.net/mnevqk1o/1/ HTML：

serviceName

这就是CSS：

<option>

我怎样才能实现这一目标？

Answer 1

我会删除这两个容器并将它们合并为一个。然后基本上使用text-align:center作为容器，并确保两个元素都是display:inline-block。

这是一个小提琴和代码： http://jsfiddle.net/5cb2k3ax/

HTML

<div class="row text-center" style="width:100%">
    <div class="col-md-4"></div>
    <div class="col-md-4 osheading pc">
        <div class="oslogo">
            <img src="http://www.zerowasteusa.com/prodImages/BlackIcon_2.jpg">
            <h1>Windows User</h1>
        </div>
    </div>
    <div class="col-md-4"></div>
</div>

CSS

.oslogo {
    text-align:center;
    white-space:nowrap;
}
.oslogo img,
.oslogo h1{
    display:inline-block;
}

Answer 2

你可以大大简化这一点。您不一定需要使用网格，但可以（use col-*-12 or col-*-4 col-*-offset-4）。而且你只需要一个div和两个规则来实际对齐文本和img。

示例是垂直居中的，但是如果您正在做其他事情，则会对这些规则进行评论。

.logo-block {
    text-align: center;
}
.logo-block h1 {
    display: inline-block;
}

请参阅工作代码段。

.logo-block {
  text-align: center;
}
.logo-block h1 {
  display: inline-block;
  /*Only for Vertical Align Middle*/
  margin: 0;
  vertical-align: middle;
}
/*Only for Vertical Align Middle*/

.logo-block img {
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="logo-block">
    <img src="http://www.zerowasteusa.com/prodImages/BlackIcon_2.jpg">
    <h1>Windows User</h1>

  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="logo-block">
        <img src="http://www.zerowasteusa.com/prodImages/BlackIcon_2.jpg">
        <h1>Windows User</h1>

      </div>
    </div>
  </div>
</div>
<hr>

Answer 3

如果我了解你，那么你所缺失的就是

的设定宽度

.osheading { width:313px; }

Answer 4

老实说，我认为这可以通过简单的代码来解决：

<div class="container-fluid">
    <div class="row text-center">
        <div class="col-xs-12">
            <h1>
                <img src="http://www.zerowasteusa.com/prodImages/BlackIcon_2.jpg"/>
                Windows User
            </h1>
        </div>
    </div>
</div>

只需将徽标和文字内嵌在<h1>标记内，并将其父级宽度设置为100％（使用bootstrap的<div class="container-fluid">，<div class="row">和<div class="col-*0-12">结构。< / p>

JSFiddle

如何将徽标和标题对齐到页面中心？

4 个答案: