Ways to position a div at the center of a page

I've encountered a challenge while creating a mobile website. Within the main div, there are three nested divs. Initially, I aimed for left alignment but now desire to center-align these three divs on the page. Essentially, if the device screen is wide, I want them to be centered, as they are currently positioned to the left.

I have attempted various methods without success. Here is the code and CSS. I acknowledge that sizes should be in em's rather than pixels; I will address that promptly.

<div class="main-buttons">
<div class="box1"><a href="#"></a></div>
<div class="box2"><a href="#"></a></div>
<div class="box3"><a href="#"></a></div>
</div><!-- MAIN BUTTONS ENDS HERE -->


.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;}

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; }
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; }
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }
csshtmlcenteralignment

Answer №1

To achieve the desired outcome using CSS, you can adjust the margin property accordingly.

For the parent div, utilize the following CSS code to ensure a smooth functioning:

.main-contents
{
    margin: 10px auto; 
    height:42px; 
    padding:5px 10px 5px 10px; 
    background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;
    overflow: hidden;
}

.box1, .box2, .box3
{
    float:left;
}

Answer №2

After a bit of trial and error, I finally found the solution to my issue. By adding an extra line of CSS and nesting my sub divs inside the main div, I was able to achieve the desired outcome without altering the width of the parent div. To center everything properly, I created another div and applied {margin:0 auto;} to it. While I'm not sure if this approach is ideal, it did solve the problem that I was facing.

<div class="main-buttons">
<div class="sub-buttons">
<div class="box1"><a href="#"></a></div>
<div class="box2"><a href="#"></a></div>
<div class="box3"><a href="#"></a></div>
</div><!-- SUB DIV ENDS HERE -->
</div><!-- MAIN BUTTONS ENDS HERE -->

CSS:

.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;}
.sub-buttons{ width:202px; height:42px; margin:0 auto;}

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; }
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; }
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }

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

What is the method of adding a child to the outerHTML of the parent element instead of within it?

Is there a way to use the outerHTML method on a parent element to append a child element so that the icons appear outside of the targeted element rather than inside it? The current code snippet shows the icons inside the box, but I want them to be placed o ...

javascripthtmlcss

The appearance of responsive CSS is altered when deployed compared to when it is viewed on the

I'm a beginner in web development and facing an issue with my mobile CSS. The strange thing is that when I view it on localhost, everything looks great, but once deployed (tried both Heroku and GitHub), it appears distorted. Even when I make extreme c ...

javascripthtmlcssgithubfrontend

React and Material UI: troubleshooting problems with layout columns

I'm working on a project with three columns and I want to include a column for removing each row. Is it possible to add a "removing" column on the right? If so, how can I go about doing it? VIEW CODESANDBOX: HERE const CustomTableRow = ({ row, index ...

javascripthtmlcssreactjsmaterial-ui

Mastering Yii2: Implementing Javascript Functions such as onchange() in a View

One of the elements in my project is a checkbox: <div class="checkbox"> <label> <?= Html::checkbox('chocolate', false) ?> Chocolate </label> </div> In addition to that, I also have a span ta ...

javascriptphphtmlyii2onchange

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

Update JSON data in ng-blur event using AngularJS

Could you offer some guidance on how to push the content from a text box into JSON when I click outside of the box? Below is the code for my text box: <input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" /> And here i ...

javascriptjsonangularjshtml

"Enhance your website with a unique Bootstrap 5 carousel featuring multiple

As a beginner in Bootstrap, I am currently working on an ecommerce template to learn about Bootstrap 5. I am interested in creating a carousel that displays multiple slides at once, like a products slider with left and right arrows. Is this possible in Bo ...

javascriptcsstwitter-bootstrapcarouselbootstrap-5

Create a left-aligned div that spans the entire width of the screen, adjusting its width based on the screen size and positioning it slightly

I have a parent container with two child elements inside. I want the first child to align to the left side and the second child to align to the right side, but not starting from the exact center point. They should be positioned slightly off-center by -100p ...

javascriptcssreactjsmaterial-uijsx

Is there a way I can obtain the code for a message box?

When I refer to a message box, I am talking about a container that gives users the ability to input their text and access different features like BOLD, ITALIC, color, justify, etc., in order to customize their message's appearance! (Think of it as the ...

javascriptphphtml

Convert text into a clickable link

Creating a form with numerous text fields, some of which require numerical input. The main goal is to have users enter a tracking number, order number, or any other type of number that, when submitted, will open a new URL in a separate window with the spec ...

javascriptphpjqueryhtmlforms

The code is malfunctioning on this site (yet functions perfectly on a different website)

So I have a question that may seem silly, but it's worth asking. I'm attempting to create a sticky div element that stays in place when you scroll past a certain point on the page. This is the script I have: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Jquery Triggers Failing to Work Following Ajax Request

I have worked on 2 PHP pages, called "booking.php" and "fetch_book_time.php". Within my booking.php (where the jquery trigger is) <?php include ("conn.php"); include ("functions.php"); ?> $(document).ready(function(){ $(".form-group"). ...

javascriptphphtmljqueryajax

What steps can I take to resolve the CSP errors I am experiencing?

I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config fi ...

javascriptcssnext.jshttp-headerscontent-security-policy

The event listener function is not functioning properly on images generated by JavaScript

I'm currently working on placing multiple images on a grid in the center of the page and would like to include a function that triggers when each individual image is clicked. The images are dynamically created using JavaScript and inserted into the do ...

javascripthtmlcss

Enhance your data retrieval from XPATH using Javascript

Here is the layout of an HTML template I am working with: <div class="item"> <span class="light">Date</span> <a class="link" href="">2018</a> (4pop) </div> <div class="item"> <span class="light">From</sp ...

javascripthtmlxpath

Error: Unable to access the 'version' property of null

Having trouble installing any software on my computer, I've attempted various solutions suggested here but none have been successful. $ npm install axios npm ERR! Cannot read property '**version**' of null npm ERR! A complete log of this ru ...

javascripthtmlnode.jsreactjsnpm

Automatically activate the next tab in Bootstrap

I have a modal that performs a count. Once the count is completed, the modal closes. My goal is to automatically switch to the next tab in Bootstrap when the modal closes. Here is the HTML: <ul class="nav nav-tabs namelocationtable"> <div clas ...

javascriptjqueryhtmltabsbootstrap-modal

Trouble arises when adding a .js script to the webpage

I'm feeling quite puzzled by this small piece of code, as it appears to be the simplest thing you'll come across today. Despite that, I can't help but seek guidance because I've been staring at it for what feels like an eternity and can ...

javascripthtml

Matching an element that contains a specific string in JS/CSS

I'm currently faced with an HTML file that's being generated by an outdated system, making it tricky for me to control the code generation process. The structure of the HTML code is as follows: <table cellpadding=10> <tr> ...

javascriptcssdom

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

I'm currently working on an Angular4 application that features a carousel displaying products, their names, and prices. At the moment, there are 6 products organized into two rows of 3 each. The carousel includes buttons to navigate left or right to d ...

javascripthtmlcssangularbootstrap-4