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

zwghvu4y 于 2023-03-20 发布在其他

关注(0)|答案(5)|浏览(135)

我试图对齐一个标志的左边的一个标题和两个一起到一个页面的中心，如图所示。

这是我在搜索了SO并试用了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;
}

我怎样才能做到这一点？

css

来源：https://stackoverflow.com/questions/33394711/how-can-i-align-a-logo-and-a-heading-to-the-centre-of-a-page

5条答案

按热度按时间

x6492ojm1#

我会删除这两个容器并将它们组合成一个，然后基本上使用text-align:center作为容器，并确保两个元素都是display:inline-block。
这里有一个小提琴和代码：http://jsfiddle.net/5cb2k3ax/
超文本标记语言

<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;
}

赞(0）回复(0）举报 2023-03-20

vsikbqxv2#

你可以大大简化这个过程，你不一定需要使用网格，但可以（use col-*-12 or col-*-4 col-*-offset-4），你只需要一个div和两个规则来对齐文本和img。
这些例子是垂直居中的，但这些规则是注解的，以防你做其他事情。

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

请参见工作代码段。
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-20

zaqlnxep3#

如果我没理解错的话，你所缺少的只是一个固定的宽度

.osheading { width:313px; }

赞(0）回复(0）举报 2023-03-20

3pvhb19x4#

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

<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">结构）。
JSFiddle

赞(0）回复(0）举报 2023-03-20

jgovgodb5#

可能会把它放在div标签中并居中对齐只是可能

赞(0）回复(0）举报 2023-03-20