Question

HTML CODE：

    <div class="container-fluid">
        <header class="header-area row">
            <div class="container-fluid">
            <div class="logo-area row">
                <div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
                    <a href="index.html"><img class="img-responsive" src="images/logo.png" alt="V" /></a>
                </div>
            </div>
            </div>
            <div class="container-fluid">
            <div class="heading row">
                <div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
                    <h1>I love design </h1>
                </div>
            </div>
            </div>
        </header>
    </div>

CSS代码：

.header-area .logo-area img {
    width: 90px;
    height: auto;
    margin: 52px 0 120px;
}
.img-responsive {
    margin: 0 auto;
}

我试过很多方法但是我失败了。解决方案应该使用bootstrap来完成。请帮助我。

Answer 1

这是一个解决方案，只需添加css display:inline-block并将所有标记放在此html <center > </center>

之间

这里是修改后的代码

.inline{
	display: inline-block;
	margin-right: auto;
	margin-left: auto;
}
.header-area .logo-area img {
    width: 90px;
    height: auto;
    margin: 52px 0 120px;
}
.img-responsive {
    margin: 0 auto;
}

 <center>
 <div class="container-fluid">
        <header class="header-area row">
            <div class="container-fluid inline">
            <div class="logo-area row">
                <div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
                    <a href="index.html"><img class="img-responsive" src="images/logo.png" alt="V" /></a>
                </div>
            </div>
            </div>
            <div class="container-fluid inline">
            <div class="heading row">
                <div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
                    <h1>I love design </h1>
                </div>
            </div>
            </div>
        </header>
    </div>
    </center>`

祝你好运..

Answer 2

尝试向text-center添加1个课程conrainer-fluid并删除您在CSS中应用的所有页边距

<div class="container-fluid text-center">
    <header class="header-area row">
        <div class="container-fluid">
        <div class="logo-area row">
            <div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5">
                <a href="index.html"><img class="img-responsive" src="images/logo.png" alt="V" /></a>
            </div>
        </div>
        </div>
        <div class="container-fluid text-center">
        <div class="heading row">
            <div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5">
                <h1>I love design </h1>
            </div>
        </div>
        </div>
    </header>
</div>

Answer 3

在CSS文件中添加此样式：

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

并且还在您的图片上添加应用此课程：

<img class="img-responsive" src="images/logo.png" class=".center-block" alt="V" />

<强> Demo

我希望所有屏幕尺寸的徽标和标题都在中心

3 个答案: