如何使徽标和标题对齐到页面的中心？
如何使徽标和标题对齐到页面的中心？
提问于 2015-10-28 15:09:40
我试着在标题的左边对齐一个徽标，和在一个页面的中心对齐，就像在图像中一样。
这是我在搜索和玩Chrome工具之后所得到的结果：https://jsfiddle.net/mnevqk1o/1/ 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">
</div>
<div class="ostext">
<h1>Windows User</h1>
</div>
</div>
<div class="col-md-4"></div>
</div>下面是CSS：
.oslogo {
float: left;
display: inline;
vertical-align: middle !important;
}
.osheading {
vertical-align: middle !important;
margin-bottom: 30px;
display: inline-block;
margin: 0 auto 0 auto;
text-align: center;
}
.ostext {
text-align: left;
}我怎样才能做到这一点？
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-10-28 15:39:09
你可以大大简化这件事。您不一定需要使用网格，但需要使用网格(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>
Stack Overflow用户
发布于 2015-10-28 15:16:03
我会把这两个容器拆开，把它们组合成一个。然后，基本上对容器使用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;
}Stack Overflow用户
发布于 2015-10-28 15:14:39
如果我理解你的话，你所缺少的就是
.osheading { width:313px; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33394711
复制相关文章
相似问题
腾讯云开发者
