Having trouble aligning the content in my website's footer to the center

Seeking guidance from a seasoned CSS expert. The address/phone info section at the bottom of every page on could benefit from being centered, but I am struggling to achieve this. Applying text-align:center to either aside#footer-sidebar or div#fsidebar only centers the text inside the <li>, while the entire section remains on the left side of #wrapper. Even using 

margin-left:auto; margin-right:auto;
does not produce any visible changes when applied to elements like #footer-sidebar, #fsidebar, or #fsidebar-ul.

I am open to modifying the markup if necessary, so any suggestions are welcomed.

cssresponsive-designwordpress-theming

Answer №1

To fix the layout, you can either remove the float:left; from 

#hsidebar .widget-container, #fsidebar .widget-container
, or you can override it with this code:

#fsidebar #text-4 {
    float: none;
    text-align: center;
}

Next, eliminate the float:left; from 

#fsidebar #text-4 .textwidget > div > div
and replace it with the following rule:

#fsidebar #text-4 .textwidget > div > div {
    display: inline-block;
    float: none !important;
}

Give these changes a try and see if it resolves the issue!

Answer №2

To center the block on the page, you should set a specific width for your #fsidebar element like so:

#fsidebar {
    margin: 0 auto; // this is equivalent to setting margin-left: auto; and margin-right: auto;
    width: 400px;
}

If you prefer to align the block with the right column of your webpage, you can simply adjust the margins/padding of the block like this:

#fsidebar {
    margin-left: 350px; // adjust as needed for desired positioning
}

Answer №3

Greetings! Below is the code snippet you can use to align the footer text in the middle of your website:

#fsidebar {
text-align: center;
}

.widget-container {
margin: 5%;
}

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

Sliding Vertical Navigation Panel

Hey, I'm working on creating a vertical sliding effect and I've managed to get it almost right with simple code. However, there are three issues that I need help with: I want the sub menus to be closed by default when the page loads When quickl ...

cssslide

The top row of a Bootstrap table generated with JavaScript does not display the background color as intended

I am currently using JavaScript to generate some HTML that displays a Bootstrap table. Below is the code for creating this: function displayTableData(d){ let html = ''; html += '<table id="my-table" class="table&q ...

javascripthtmlcssbootstrap-4

What is the best way to eliminate the forward slash from a string?

There is a string that goes like this: var str='Dowagiac\'s Olympic wrestler recalled' The objective is to eliminate the forward slash from the string. var str1=str.replace(/\'/g, '\\\''); ale ...

javascriptjqueryhtmlcss

Tips for maintaining position when refreshing a web page within a scrolling table

Recently, I came across a helpful tutorial on how to create a table with a fixed header and scrollable body. You can find it here. While the tutorial worked perfectly for me, I encountered an issue when trying to refresh the webpage and maintain my positio ...

javascriptphphtmlcss

Creating a search field in Bootstrap 4 that emulates material design, facing challenges with transition animations

I tried to create a material design search field using Bootstrap form input. While I was able to make it work, I noticed a small issue with the focus state. When I click inside the field, the underline animation runs smoothly. However, when I click outside ...

htmlcsstwitter-bootstrapbootstrap-4

jquery not responsive to font-size changes in textarea during screen resize

JavaScript Code $(window).on('resize', function(){ if ($(window).width() <= 800) { $('textarea').css("font-size", "20x"); } else { $('textarea').css("font-size", "30x"); } }); View Demo I a ...

javascriptjqueryhtmlcss

Tips for displaying gaps between three divs while ensuring they remain aligned in a single row

I am currently working on HTML code that is intended to display 3 divs side by side using Bootstrap syntax: .main-background { background-color: white; padding-top: 40px; padding-right: 20px; padding-bottom: 40px; padding-left: 20px; } .mai ...

htmlcssbootstrap-4

Best practices for aligning the widths of input-group-addon elements

Hey there, I'm working with an HTML file that has 3 input options. Here's a snippet: <script type="text/ng-template" id="dashboard_assigngroup_popup.html"> <div class="modal-header modal-header2"> <h3 class="modal-tit ...

javascriptcssangularjshtml

Utilizing the CSS transform scale() function to enlarge an element while preserving its entire content and allowing for scrolling

Check out this live example: https://jsfiddle.net/b8vLg0ny/ You can actually utilize the CSS functions scale and translate to magnify an element. For instance, consider a scenario with 4 boxes arranged in a 2x2 grid. The HTML code for this setup is as f ...

javascripthtmlcsscss-transformsscaletransform

Fixing the background transition issue on Safari is a common problem that many users encounter

My background image, which is overlaid with a gradient, does not show up on Safari (although it works perfectly on Chrome). body{ background:linear-gradient(rgba(0, 0, 0, 0.95),rgb(0, 0, 0, 0.95)),url("https://www.w3schools.com/cssref/img_tree.gif" ...

htmlcss

Change the WordPress Divi Builder nav bar to switch from transparent to white when scrolling or upon reaching a specific point on the page

Currently, I am in the process of revamping our company's WordPress website using the Divi Builder. For the past couple of days, I have been scouring the internet trying to find a solution that would allow the navigation bar to change CSS classes as t ...

javascriptjqueryhtmlcsswordpress

div with fixed position and scrollable content

I'm exploring ways to create a simple webpage layout inspired by the traditional index setup. The idea is to have a fixed header/navbar div that is 200px in height, with a second div below it containing scrollable content that fills the remaining vert ...

htmlcssscrollable

Tips for centering div content using bootstrap

https://i.sstatic.net/GtIi0.pngI am trying to align 3 divs in a row at the center of the page. <div class="row"> <div class="center"> <div class="col-sm-4" id="ph-container"></div> <div class="col-sm-4" id="do-contai ...

javascriptjquerycsstwitter-bootstrap

How to swap out the rel attribute with id in jQuery

Ensuring my webpages are W3C valid is a priority for me. I am taking steps to rectify errors one by one in order to achieve validity. Upon using the HTML5 doctype, an error was flagged. On Line 348, Column 81: it was pointed out that the RDFa Core attribu ...

javascriptjquerycssw3c

"Why does the font on my website look different on my computer before I upload it to my web host? How can I fix

I am currently developing a website and have chosen the font "PT Sans Narrow" for it. Unfortunately, it seems that Chrome and many other browsers do not support this font by default. Is there a way to include the PT Sans Narrow font with the website when ...

htmlcssfonts

The div is leaving the responsive bootstrap gallery

I'm experiencing an issue with my gallery overflowing the parent div and not staying sorted in all screen sizes. Here's a screenshot along with a snippet of the code: https://i.sstatic.net/mKRtZ.jpg <div id="gallery" class="container-fluid" ...

javascriptjqueryhtmlcsstwitter-bootstrap

fade in and out twice (for beginners)

Jquery <script> //Code snippet $(document).ready(function(){ $(".team").click(function(){ $(".panel").fadeToggle("3000"); }); $(".team").click(function(){ $(".teamh").fadeToggle("3000"); }); }); </script> HTM ...

javascriptjqueryhtmlcss

Unlimited rotation feature using Twitter Bootstrap

I am currently working with a carousel using Twitter Bootstrap to display 5 items. Here is an example of what I have set up: <div id="carolsel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

jquerycsstwitter-bootstrap

Codeigniter checkbox functionality allows users to select and submit multiple

I have implemented Bootstrap for a checkbox, however when I click on the checkbox it gets checked but the visual indication of the check mark is not displayed in the Bootstrap design. Below is my code: <label for="success" class="btn btn-success">S ...

htmlcsstwitter-bootstrapcodeigniter

Blending Grommet Theme with a touch of Custom CSS for Component Styling

I've been working on a React site that incorporates Grommet as the UX framework along with an embedded chat control. While everything is functional, the layout leaves much to be desired (see second image below). In the provided link, you can see that ...

cssreactjssassbotframework