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.

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

Setting the color of an element using CSS based on another element's style

I currently have several html elements embedded within my webpage, such as: <section id="top-bar"> <!-- html content --> </section> <section id="header"> <!-- html content --> </section> <div id="left"> &l ...

I am looking to display an image as a value in the dropdown menu of my Contact Form 7 on my WordPress website

I am currently working on a Wordpress website where I have a page showcasing 50 different company logos. Below the logo section, there is a form created using Contact Form 7. The logo section was built using a combination of HTML and CSS. Within the form ...

What is the best way to generate this arc using CSS3?

What is the most effective method for creating this unique shape using CSS3? The square image should be clearly defined. We greatly appreciate any insight you can offer. EDIT: I have put in a lot of effort, but standard CSS methods are not getting me t ...

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

Easy Peasy CSS Placement

Struggling with CSS and in desperate need of assistance. I've provided my code attempts along with pictures showing what I currently have versus the desired outcome. HTML <div class="thumbposter"><img src="http://tipmypicks.com/cssmovie ...

Guide on toggling the button by clicking on the icon to turn it on or off

Within my angular application, I have implemented font icons alongside a toggle switch. Initially, the switch is in the ON state. The specific functionality desired is for clicking on an icon to change its color from white to red (this has been achieved) ...

Integrate a button following the first paragraph exclusively when there are two or more paragraphs present

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> jQuery(document).ready(function($) { if ( $('p').length < 1 ) { $('p:last-child').after('<div id="toggle" class="btn"> ...

What is the best way to preserve code in a blog post without any alterations to the code itself?

@"//div[@id='transcriptText']/div[@class='notranslate']/p/a/@href"]; @"//div[@id='videoPlayerSWF']/noscript/div/p/a/@href"]; @"//div[@id='transcriptText']/div/p/a/text()"]; @"//div[@id='transcriptT ...

Improving User Experience with HTML Form Currency Field: Automatically Formatting Currency to 2 Decimal Places and Setting Maximum Length

Hello there, I am currently facing an issue with the currency auto-formatting in a deposit field on my form. The formatting adds 2 decimal places (for example, when a user types 2500, the field displays 25.00). However, the script I wrote does not seem to ...

Can we set a restriction on the maximum number of children a particular div can contain?

I'm trying to find a way to restrict the number of children in a div. The concept is that there is a selected commands div where you can drag and drop available commands (essentially buttons) from another div called available commands. However, I wan ...

Top tips for utilizing CSS in a web component library to support various themes

Our team is currently in the process of developing a comprehensive design system that will be utilized across multiple projects for two distinct products. Each product operates with its own unique brand styleguide which utilizes design tokens, such as: Th ...

A guide to displaying dropdown values above a modal

I have encountered an issue while using a dropdown inside a modal window. The problem is that not all the dropdown values are visible, as the overflow part gets hidden. I am looking for a solution to keep the dropdown value at the top and prevent it from b ...

Tips on automatically changing the background image every few seconds

As a newcomer to Angular and programming in general, I am facing an issue with changing the background image of my Page using the setInterval method. The intended behavior is for it to change every second, but for some reason, it changes much faster than t ...

Failure to capture spaces in onChange events for <input> elements

I'm having an issue where the onChange event is not being called on my HTML input element when pressing the space bar. Here's a snippet of what I've tried: class FilterDropDown extends React.PureComponent { state = { query: '&ap ...

Steps to connect two drop-down menus and establish a starting value for both

In the scope, I have a map called $scope.graphEventsAndFields. Each object inside this map is structured like so: {'event_name': ['field1', 'field2', ...]} (where the key represents an event name and the value is an array of f ...

Having trouble with applying a custom class to React Bootstrap tabs?

When utilizing the react bootstrap tabs component, I encountered an issue with implementing a custom CSS style for the nav-link element within it using a customized parent class indicator. <Tabs defaultActiveKey="signup_renter" i ...

Adjusting ToggleButton hues in react-bootstrap

I am working with a group of ToggleButtons in my app and I want to customize their background colors. Currently, all the buttons have a gradient defined by <.untoggled-button> class, with an added blue overlay for unselected buttons. However, I am fa ...

Adding a <tr> tag to an HTML table using JQuery and AJAX in the context of Django framework step by step

I am currently navigating the world of Javascript, Jquery, and Ajax requests and I'm encountering a challenge with how my scripts are executing. My homepage contains a lengthy list of items (over 1200) that need to be displayed. Previously, I loaded ...

Tips for creating a dynamic sidebar animation

I have recently delved into the world of web design and am eager to incorporate a sidebar into my project. While browsing through w3school, I came across a design that caught my eye, but I found myself struggling to grasp certain concepts like the 'a& ...

SVG Height remains fixed despite aspect ratio adjustments

Using one SVG image in a div with a width of 50px results in a height of 150px in IE11. The correct dimensions should be 50px x 50px. The width is applied correctly, but the height is not. Any suggestions? .svg-cont{ width:50px } img{ max-width:100% ...