I am attempting to align the divs within a main div in the center, while keeping the text within the div aligned as usual. This is for a footer sitemap.
As of now, this is how it appears:
I attempted using text-align: center, but it also centers the text.
Is there a specific CSS rule I need to include?
It seems like your setup resembles something similar to this:
<footer>
<div>
<a href="#">Linky</a>
<a href="#">Linky</a>
<a href="#">Linky</a>
</div>
<div>
<a href="#">Linky</a>
<a href="#">Linky</a>
<a href="#">Linky</a>
</div>
<div>
<a href="#">Linky</a>
<a href="#">Linky</a>
<a href="#">Linky</a>
</div>
<div>
<a href="#">Linky</a>
<a href="#">Linky</a>
<a href="#">Linky</a>
</div>
</footer>
If I'm understanding correctly, you're looking to have each of the four divs occupy an equal amount of space? In that case, try setting the width of each div to 25% (or adjust based on the number of divs you have).
Apply floating to the div elements:
.header-section {
width: 30%;
float: right;
}
You can view the complete demonstration on jsfiddle.
It appears that you believe there is some extra space at the right end of the footer, but in reality, there isn't any.
Each list of entries with their h3 title is contained within a <div> and each of these 4 divs has a CSS setting of width: 25%; - this totals to 100% of the available space, leaving no room for additional spacing. If you wish to adjust the positioning of these divs to create space around them and then center them, you can attempt something like this:
<div id="footer">
<div id="footer-container">
<?php if ($informations) { ?>
<div class="column">
<h3><?php echo $text_information; ?></h3>
<ul>
<?php foreach ($informations as $information) { ?>
<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
<div class="column">
<h3><?php echo $text_service; ?></h3>
<ul>
<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
<li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
</ul>
</div>
<div class="column">
<h3><?php echo $text_extra; ?></h3>
<ul>
<li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>
<li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
<li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
<li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
</ul>
</div>
<div class="column">
<h3><?php echo $text_account; ?></h3>
<ul>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
</ul>
</div>
</div>
</div>
We have wrapped all four column divs within another div with the id footer-container - now let's define some CSS styles for it:
#footer-container {
width: 90%;
margin: 0 auto;
}
With the adjusted width (90%), there will be some space surrounding the #footer-container and using an 'auto' value for the left and right margins should center it within the #footer div. Feel free to experiment with the width of the #footer-container to suit your preferences.
Here is the jsFiddle link for reference.
Note: This setup will function correctly in versions up to 1.5.X, but may not work effectively in the new 2.0 version which utilizes Bootstrap grid columns for responsiveness.
If you want to center certain divs, it is recommended to assign a class to those specific divs. Here's an example:
<div class="centered">Content goes here</div>
<div class="centered">Content goes here</div>
<div class="centered">Content goes here</div>
<div class="centered">Content goes here</div>
To center the divs without centering the text inside them, you can use the following CSS:
div.centered{
margin:auto;
text-align:inherit !important;}
In this code snippet, we specify 'inherit' for 'text-align' property to ensure that only the divs with the class 'centered' are centered, leaving the text alignment as it is. For more details on how 'inherit' works in CSS, you can refer to the link below: http://www.w3schools.com/cssref/css_inherit.asp
I've tried many solutions from different articles, but none seem to work for me. I would greatly appreciate any assistance in displaying the Full_Name field within an HTML element on my webpage. Below is the content of the PHP file: {"Test_Info": { ...
Issue at Hand In my endeavor to enhance a web app by incorporating an iframe, I stumbled upon a peculiar challenge. The behavior of the iframe across devices is inconsistent, particularly on the iPhone. Consequently, I find myself in need of implementing ...
How come the value for a dynamic attribute is showing up as "undefined" in my form? I initially thought it was related to a hidden input, but the issue persists even when the input is not hidden. When trying to save a new event, I want the user to be able ...
I'm grappling with the issue of how to prevent the side-nav from obscuring the top element in the vanilla Bootstrap 4 example provided below. Any tips? (Problem resolved - check below for solution) This problem is occurring not only on my website bu ...
I have a section in HTML that is divided into two parts. In one section, I am listing some points and in the other, I am displaying their corresponding sentence on hover. Here is how I implemented it: .showme { display: none; } .single-fun-fact:hover~. ...
As I explore various Angular 2 frameworks, particularly Angular Material 2 and Ionic 2, I've noticed a difference in their component stylings. Some components have CSS directly applied to the tags, while others use classes for styling. For instance, w ...
I am currently facing an issue with a form on my website. The form code is as follows: <form action="" method="post" id="login_form"> <input type="text" name="log_login_form"/> <br/> <input type="password" name="log_password_for ...
I am currently working on a php file (todo.php & todo.js) that gathers user data and uses ajax to send this information to another php file (add.php) for database insertion. However, I want to avoid using ajax to post data to the add.php file. How can ...
Can someone help correct my JavaScript code and explain the necessary steps taken to do so? I'm trying to figure out what mistake caused my quiz questions and options to not display correctly within the central div. Giving some background on my code: ...
Visit this link for reference <div class="col-10 content" id="content"> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> < ...
This code snippet is a part of a React component in a project. I have imported a CSS file for styling and have already integrated Material UI. However, the function for the new article is not displaying on the webpage as expected. import "./Widgets. ...
When using the jQuery Cycle plugin in IE8 (as well as other versions of Internet Explorer), I am encountering an issue. My slideshow consists of 3 slides, each containing a Title, Description, and Image. The problem arises when viewing the slideshow in I ...
I've been exploring ways to improve the quality of buttons in my mobile design. Currently, my navigation buttons are in a 72ppi PNG sprite and I also have another set at 326ppi. I've heard that iPhone4 can automatically choose the higher resoluti ...
For over a day, I've been attempting to include three functionalities in this code, but have yet to succeed. 1° My goal is to insert a button on this page. I've attempted to create a standard button using HTML and CSS, but the fireworks displa ...
In my project, I have 10 unique .handlebars files that are being called using express GET methods as shown below: app.get('/pagename1', function(req, res, next) { res.render('page1'); }); app.get('/pagename2', function(req ...
I currently have this code snippet: <nav> <ul class="sel"> <li> <a href="#LINK1" data-title="A">A</a> </li> <li> <a href ...
I am currently working on implementing a feature for my Next.js website. The functionality involves allowing users to create a new group by clicking a button, and then being redirected to an "Invite members" page with the auto-generated group_id included i ...
I'm currently working on creating a website for my friend who is a massage therapist. Utilizing a bootstrap dropdown menu, I have added links to different treatments that direct to the treatment.html from the index.html page. Is there a way to creat ...
There seems to be an issue with the CSS writing mode not applying correctly to the symbol '№'. Here is an example: <html> <head></head> <body> <p style="writing-mode: vertical-lr;"> Номер № ...
Seeking a way to dynamically modify CSS attributes via a database field. Rather than using multiple if statements like the one below: if (@Model["font"] == "arial") //set the font to arial I'd like a cleaner solution that doesn't clutter my vie ...