Question

我有一个wp网站页面：http://www.agapegreekradio.com/on-air-personalities/

它不在屏幕上。

我有以下代码：

 <div class="section_inner">
      <div class="container">

        <div class="row">
          <?php
          while ( have_posts() ) : the_post();
          $id= get_the_ID();

          ?>
          <div class="inner_body">
            <div class="col-xs-10 col-sm-10 col-md-4 col-lg-10 border-pr">
        <h2><?php the_title(); ?></h2>
              <div class="inner_page_text">
              <!-- <h2><?php the_title(); ?></h2>-->
               <p><?php the_content(); ?></p>
              </div>
            </div>
            <!--<div class="col-xs-10 col-sm-10 col-md-8 col-lg-8">
              <div class="inner_right_text">
                <h4><?php echo get_the_title(); ?></h4>
                <p><?php the_content(); ?>   
                </p>
              </div>
            </div>-->
          </div>

      </div>
    <?php endwhile; ?>
    </div>
    </div>
    <?php include_once('footer.php'); ?>

如何将包装盒放在屏幕中心？

Answer 1

可能你可以添加这个类

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 border-pr">

在此div之后

<div class="inner_body">

Answer 2

让我们在你的样式表中试试这个

   margin: 0 auto;
   display : block;
   float: none;

Answer 3

从您的CSS中删除保证金，并在您的HTML中添加col-md-offset-1 Bootstrap offset class。

表单示例

<div class="col-xs-10 border-pr col col-xs-offset-1">
   <h2><?php the_title(); ?></h2>
   <div class="inner_page_text">
      <!-- <h2><?php the_title(); ?></h2>-->
      <p><?php the_content(); ?></p>
   </div>
</div>

Answer 4

我在你的网站上有一张支票。问题是因为div的默认CSS规则

<div class="col-xs-10 col-sm-10 col-md-4 col-lg-10 border-pr">向左浮动。

所以我继续将此样式属性内联添加到style="float:none;"并将div放在中心位置。

所以你的div必须看起来像这样

<div class="col-xs-10 col-sm-10 col-md-4 col-lg-10 border-pr" style="float:none;"> 或者您甚至可以在其中添加一些具有相同规则的类，或者在现有调用中添加规则，您希望如何。

以下是结果截图。

Answer 5

你可以添加前面和后面有一个网格的enpty容器，这样它就会居中

 <div class="col-xs-1 col-sm-1 col-lg-1"></div>
 <div class="col-xs-10 col-sm-10 col-md-4 col-lg-10 border-pr"></div>
 <div class="col-xs-1 col-sm-1 col-lg-1"></div>

Answer 6

添加此css：

margin-left: auto;
margin-right: auto;
float: none;

到这个html，可能是border-pr类或者为它添加一个新类：

<div style="margin-left: auto; margin-right: auto; float: none;" class="col-xs-10 col-sm-10 col-md-4 col-lg-10 border-pr">

更多css：

.inner_body{
width: 100%;
height: auto;
overflow: auto;
}

Answer 7

内部使用后

。

<div class="inner-body">
<div class="col-lg-12 col-xs-12 col-md-12 col-sm-12 border-pr" align="center">

如何将框内置于页面中心

7 个答案: