无法将内容集中在列

时间：2017-11-13 00:24:52

标签： html css

我有一个包含两个部分的盒子 - 一个信息面板和一张照片。我试图将两个这样的盒子放在同一行，以它们各自的列为中心。

我已尝试过我在本网站上找到的所有解决方案。 Center-block，align="center"，margin: auto，float等等。我无法弄清楚这一点。

任何时候我尝试应用某种中心类，它会移动图片一点点，而不是别的。

这是代码。我尝试在div中添加一个类，其中包含第一个和第二个框的注释。我已删除它，因为它没有效果。

＆＃13;
＆＃13; 
.box-sm {
  background-color: #e0dbc8;
  width: 300px;
  height: 300px;
  margin: 0px;
  padding: 0px;
}

.box-sm-pic {
  margin: 0px;
  padding: 0px;
}
＆＃13; 
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <!-- First Box -->
      <div class="row">
        <div class="col-lg-6 box-sm">
          <!-- Header, Description and button -->
          <h2>ROOMS</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur maiores eum quod repudiandae, voluptates recusandae?</p>
          <br><button type="button" class="btn btn-primary center-block">BOOK NOW</button>
        </div>
        <div class="col-lg-6 box-sm-pic">
          <!-- Image -->
          <img src="img/box-rooms.jpg" class="img-responsive" width="300" height="300" alt="" />
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <!-- Second Box -->
      <div class="row">
        <div class="col-lg-6 box-sm">
          <!-- Header, Description and button -->
          <h2>ROOMS</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur maiores eum quod repudiandae, voluptates recusandae?</p>
          <br>
          <button type="button" class="btn btn-primary center-block">BOOK NOW</button>
        </div>
        <div class="col-lg-6 box-sm-pic">
          <!-- Image -->
          <img src="img/box-rooms.jpg" class="img-responsive" width="300" height="300" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

框正确显示但左对齐。有人请帮忙！

5 个答案:

答案 0 :(得分：0)

<强> CSS 

.box-sm {
    background-color: #e0dbc8;
    width: 300px;
    height: 300px;
    margin: 0;
    padding: 0;
    text-align: center;
}

.box-sm-pic {
    margin: 0;
    padding: 0;
    width: 300px;
    height: 300px;
}

.column {
    margin: 0 auto;
    max-width: 600px;
}

<强> HTML 

<div class="container-fluid col-lg-12">
    <div class="row">
        <div class="col-lg-6 col-sm-12">
            <!-- First Box -->
            <div class="column">
                <div class="col-lg-3 col-sm-6 box-sm">
                    <!-- Header, Description and button -->
                    <h2>ROOMS</h2>
                    <br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur maiores eum quod repudiandae, voluptates recusandae?</p>
                    <br><button type="button" class="btn btn-primary center-block">BOOK NOW</button>
                </div>
                <div class="col-lg-3 col-sm-6 box-sm-pic">
                    <!-- Image -->
                    <img src="http://via.placeholder.com/300" class="img-responsive" width="300" height="300" alt="" />
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-12">
            <!-- Second Box -->
            <div class="column">
                <div class="col-lg-3 col-sm-6 box-sm">
                    <!-- Header, Description and button -->
                    <h2>ROOMS</h2>
                    <br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur maiores eum quod repudiandae, voluptates recusandae?</p>
                    <br>
                    <button type="button" class="btn btn-primary center-block">BOOK NOW</button>
                </div>
                <div class="col-lg-3 col-sm-6 box-sm-pic">
                    <!-- Image -->
                    <img src="http://via.placeholder.com/300" class="img-responsive" width="300" height="300" alt="" />
                </div>
            </div>
        </div>
    </div>
</div>

答案 1 :(得分：0)

您设置的宽度和边距属性是覆盖bootstrap。我想这就是你要找的东西。

  • 删除了您的课程＆＃34; .box-sm＆＃34;和＆＃34; .box-sm-pic＆＃34;
  • 为我的本地开发者添加了CDN for bootstrap（我知道格式错误）

随意编辑。我希望这会有所帮助。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <!-- First Box -->
      <div class="row">
        <div class="col-lg-6">
          <!-- Header, Description and button -->
          <h2>ROOMS</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur maiores eum quod repudiandae, voluptates recusandae?</p>
          <br><button type="button" class="btn btn-primary center-block">BOOK NOW</button>
        </div>
        <div class="col-lg-6">
          <!-- Image -->
          <img src=" http://fillmurray.com/300/300" class="img-responsive" alt="" />
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <!-- Second Box -->
      <div class="row">
        <div class="col-lg-6">
          <!-- Header, Description and button -->
          <h2>ROOMS</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur maiores eum quod repudiandae, voluptates recusandae?</p>
          <br>
          <button type="button" class="btn btn-primary center-block">BOOK NOW</button>
        </div>
        <div class="col-lg-6 box-sm-pic">
          <!-- Image -->
          <img src=" http://fillmurray.com/300/300" class="img-responsive"  alt="" />
        </div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

只需在第一行类添加style="text-align: center"即可。如果这不符合您的预期，请发表评论。

.box-sm {
  background-color: #e0dbc8;
  width: 300px;
  height: 300px;
  margin: auto;
  padding: 0px;
}

.box-sm-pic {
  margin: 0px;
  padding: 0px;
}
<div class="container-fluid">
  <div class="row" style="text-align: center">
    <div class="col-lg-6">
      <!-- First Box -->
      <div class="row">
        <div class="col-lg-6 box-sm">
          <!-- Header, Description and button -->
          <h2>ROOMS</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur maiores eum quod repudiandae, voluptates recusandae?</p>
          <br><button type="button" class="btn btn-primary center-block">BOOK NOW</button>
        </div>
        <div class="col-lg-6 box-sm-pic">
          <!-- Image -->
          <img src="img/box-rooms.jpg" class="img-responsive" width="300" height="300" alt="" />
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <!-- Second Box -->
      <div class="row">
        <div class="col-lg-6 box-sm">
          <!-- Header, Description and button -->
          <h2>ROOMS</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur maiores eum quod repudiandae, voluptates recusandae?</p>
          <br>
          <button type="button" class="btn btn-primary center-block">BOOK NOW</button>
        </div>
        <div class="col-lg-6 box-sm-pic">
          <!-- Image -->
          <img src="img/box-rooms.jpg" class="img-responsive" width="300" height="300" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>

答案 3 :(得分：0)

使用类名称centerblock创建一个div。并在该div中添加您的html代码。 并使用此CSS。

HomePageController

答案 4 :(得分：0)

如果你可以使用对齐或任何东西将某个东西放在中心，可能是另一种风格的粉碎 但您仍然可以使用此<center>your item</center>

将项目居中
相关问题
最新问题