CODEWITHSUNDEEP
htmlcss
user5072259
user5072259

Reputation:

How to center the box inside pages

I have a wp site page: http://www.agapegreekradio.com/on-air-personalities/

And its not center on the screen.

I have the following codes:

 <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'); ?>

how can I center the box to the screen?

Upvotes: 1

Views: 104

Answers (7)

JENKINS J
JENKINS J

Reputation: 153

Let's Try this in your stylesheet

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

Upvotes: 2

Ram_UI
Ram_UI

Reputation: 485

after inner-body use the following 

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

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18997

I had a check in your website. The issue is because the default CSS rule for the div

<div class="col-xs-10 col-sm-10 col-md-4 col-lg-10 border-pr"> is to float left.

So I just went ahead and added this style attribute inline to it style="float:none;" and it centered the div.

So your div must look like this

<div class="col-xs-10 col-sm-10 col-md-4 col-lg-10 border-pr" style="float:none;"> Or you can even add some class with the same rule in it, or add the rule in the existing call, How ever you prefer.

Here is the result screen shot.

enter image description here

Upvotes: 1

Nirpendra Patel
Nirpendra Patel

Reputation: 679

add this css:

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

to this html, maybe to border-pr class or add a new class to it:

<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">

AND more css :

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

Upvotes: 0

Jainam
Jainam

Reputation: 2660

May be you can add this class

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

after this div

<div class="inner_body">

Upvotes: 3

Ismail Farooq
Ismail Farooq

Reputation: 6827

Remove margin from your css and add col-md-offset-1 Bootstrap offset class in your html.

form example 

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

Upvotes: 0

Karthikeyan sundaramoorthi
Karthikeyan sundaramoorthi

Reputation: 554

you can add enpty containers with one grid front and back so that it will be centered

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

Upvotes: 0

Related Questions