Positioning the box in the middle of pages

I have a website page at the following link:

However, the content is not centered on the screen.

Here are the codes I'm using:

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

Is there a way to center the box to the screen?

Answer №1

Perhaps you could incorporate the following CSS class:

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

right below this div element:

<div class="inner_body">

Answer №2

Why not give this a shot in your style sheet?

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

Answer №3

Upon reviewing your website, I noticed an issue with the default CSS rule for the div element.

<div class="col-xs-10 col-sm-10 col-md-4 col-lg-10 border-pr">
has a float left property by default.

To fix this, I added an inline style attribute style="float:none;" to center the div.

Your updated div should now look like this:

<div class="col-xs-10 col-sm-10 col-md-4 col-lg-10 border-pr" style="float:none;">
Alternatively, you can create a new class with the same rule or add the rule to the existing class - whichever method you prefer.

For reference, here is the screenshot of the result.

https://i.sstatic.net/jQnMN.png

Answer №4

you can achieve a centered look by adding empty containers with one grid in the front and back

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

To eliminate the margin in your CSS, you can incorporate the col-md-offset-1 Bootstrap offset class into your HTML code.

For instance:

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

Here are the CSS additions you need to make:

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

You can add these styles to the existing 'border-pr' class or create a new class for it in the HTML code below:

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

Additionally, apply the following CSS for the '.inner_body' class:

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

Answer №7

Once you have finished with the inner-body, implement the code below:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to remove backdrop-filter: blur effect from elements within a div?

Having an issue with a CSS property. I have designed a modal that includes inputs and labels, and I want to blur the background content. However, the problem I am facing is that the blur effect is also being applied to all elements inside the container, in ...

Is there a way to organize an array of elements into three columns using PHP?

My array of menu items is being displayed on the screen in 3 columns, but I want them to appear differently without altering the HTML structure. Currently, they are listed like this: 1 2 3 4 5 6 7 8 9 I would like them to display as follows: 1 4 7 ...

CSS properties are ineffective in scaling the image strip

I have a large image strip measuring 130560 x 1080. My goal is to load it into an image tag and use the parent div as a viewport, showing only one section of the image at a time. However, I'm encountering a problem when specifying the height and widt ...

I find the SetInterval loop to be quite perplexing

HTML <div id="backspace" ng-click="deleteString(''); decrementCursor();"> JS <script> $scope.deleteString = function() { if($scope.cursorPosVal > 0){ //$scope.name = $scope.name - letter; ...

If a number already exists, create 3 tables using MySQL and PHP

Currently facing an issue, I am in the process of developing a custom registration form for a browser game. I need to assign planets upon registration to users. Here's the breakdown: 9 galaxies, each galaxy consisting of 400 systems with each syste ...

Issue with Font-Awesome icons failing to display properly when using the BootstrapCDN

Trying to integrate Font-Awesome icon fonts using the BootstrapCDN link with what seems like the latest version: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> The link has been added to the <hea ...

Creating a zebra-striped list using CSS can be done by styling even and odd list items differently

I am facing an issue with Angularjs and the table tag when using group loops. The problem arises in achieving correct zebra striping for the list. How can I solve this to ensure the zebra pattern is applied correctly? <table> <tbody> <tr ...

What could be the reason for the extra tags being returned by YQL?

Currently, I am executing a query in the YQL console with the following data: select * from html where url='http://www.motorni-masla.net/index.php?main_page=product_oil_info&cPath=140&products_id=294&zenid=c8281021bbfed454176247900b3b9d4a ...

Adding a picture to the webpage and saving it temporarily on the site

After exploring all options on the site, testing it rigorously and closely following the instructions provided, I am still unable to determine where exactly I went wrong. Website Link: The main goal is to upload an image and temporarily store it within t ...

Using JavaScript and HTML to show the current month, date, and year on a webpage

I am looking to display not only the time, but also the month, date and year. My attempted solution involved creating variables for the month, day and year, and then using getElementById. Here is an example of what I tried: var d = date.getDay(); var mn ...

What is the manual way to activate Ratchet's push feature?

I am facing an issue with a link that triggers a search function. Currently, the link is working as expected. However, I am having trouble getting the search to be executed by pressing the 'enter' button. Here is my code snippet: $('#sea ...

"Discover the Step-by-Step Guide to Launching Fresh Content or Code in the Current Tab and

I have a webpage with multiple tabs, each representing different content. Now, I want to create a functionality where if a user clicks on the "Home" tab, they are prompted to enter a password (e.g., 1234). Upon entering the correct password, the user shoul ...

Creating a JSON file using the attributes and values of HTML tags

I am seeking assistance in generating a JSON file from HTML data using jQuery. The HTML structure consists of multiple departments with similar tags and classes: <div class="department_one"> <h1>Name Of Manufacturer</h1> < ...

Creating a responsive design for a centered image with absolute positioning

I'm trying to align an image at the bottom of a div while also centering it using the following CSS: HTML: <div class="myDiv"> <img src="http://bit.ly/1gHcL8T" class="imageCenter" /> </div> CSS: .myDiv { width: 80%; height: ...

Encountering spacing problems on IE9 and FF11 while using OS X

After conducting some testing on a design I coded, I found that it functions well in FF 13, Chrome 21, IE 7/8, and Opera 11.62 for Windows, as well as Safari 5.1 for OS X. Unfortunately, since I only have WinXP, I had to utilize Adobe Browserlab to test f ...

Is there anyone who can help me troubleshoot my code problem involving bootstrap specifically on Safari?

Encountering an issue with Bootstrap 4 and Safari on Mac. The problem arises when using cols within a row, causing my form to load incorrectly on Safari. Any assistance in fixing this issue would be greatly appreciated. In Chrome, the layout displays corre ...

Unable to manipulate JQuery lightSlider slides using element index

I've been working on a new page design at this link: The code is still a work in progress, so bear with me as I test out some functions and scripts. At the end of the first section, there are 4 logos that, when clicked, will trigger a modal to pop u ...

Maintain the grouping of elements within a div when printing in Internet Explorer 8

When printing in IE8, I'm facing an issue with keeping the "Table title" line on the same page as the <table>. Despite using page-break-inside:avoid;, there is still a page break between the table title and the actual table. My expectation is f ...

Room available on the body's right side for tiny gadgets

I'm currently facing a website issue while using Bootstrap. Everything seems to be working fine until I attempt to check the responsiveness of my website. There appears to be an excessive white space on the right side of my body, but only in a specifi ...

Set the height of the vertical scroll at a fixed 100% floatValue

Check out my creation at http://jsfiddle.net/ZygnV/ html, body { margin: 0; padding: 0; height: 100%; } .main-content-wrapper { height: 100%; overflow-y: hidden; white-space: nowrap; } .main-sidebar { display: inline-block; height: 1 ...