Struggling to center with margin 0 auto

I'm having trouble aligning the middle paragraph in an HTML footer. I attempted to use floats for layout: the first paragraph is floating to the left, the third paragraph is floating to the right, and the second (middle) paragraph has a margin of 0 auto. Each paragraph is also set to a width of 250px. Could someone please point out what mistake I might be making?

footer {
background: #fff;
border-top: 1px solid #ece9e9;
border-bottom: 1px solid #ece9e9;
clear: both;
overflow: hidden;
}
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
}
footer .footer-content > div {
width: 250px;
display: inline-block;
}
footer h5 {
font-size: 15px;
margin-bottom: 25px;
text-transform: uppercase;
}
footer p {
margin-bottom: 25px;
}
.footer-content .footerServices {
background-color: yellow;
float: left;
}
.footer-content .footerNewsLetter {
background-color: yellow;
float: right;
}
.footer-content .footerContact {
background-color: blue;
margin: 0 auto;
}
<footer class="footer">
  <div class="footer-content">
    <div class="footerServices">
      <h5>Services</h5>
      <p>
        first paragraph
      </p>
    </div>
    <div class="footerContact">
      <h5>Contact Us</h5>
      <p>
        second paragraph
      </p>
    </div>
    <div class="footerNewsLetter">
      <h5>Sign To Newsletter</h5>
      <p>
        third paragraph
      </p>
    </div>
  </div>
</footer>

htmlcss

Answer №1

To center align the content in the footer, simply add text-align:center to the .footer-content div:

footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
text-align:center;
}


footer {
background: #fff;
border-top: 1px solid #ece9e9;
border-bottom: 1px solid #ece9e9;
clear: both;
overflow: hidden;
}
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
text-align:center;
}
footer .footer-content > div {
width: 250px;
display: inline-block;
}
footer h5 {
font-size: 15px;
margin-bottom: 25px;
text-transform: uppercase;
}
footer p {
margin-bottom: 25px;
}
.footer-content .footerServices {
background-color: yellow;
float: left;
}
.footer-content .footerNewsLetter {
background-color: yellow;
float: right;
}
.footer-content .footerContact {
background-color: blue;
margin: 0 auto;
}
.footer-content .footerServices,.footer-content .footerNewsLetter,.footer-content .footerContact{
 text-align:left; 
}
<footer class="footer">
  <div class="footer-content">
    <div class="footerServices">
      <h5>Services</h5>
      <p>
        first paragraph
      </p>
    </div>
    <div class="footerContact">
      <h5>Contact Us</h5>
      <p>
        second paragraph
      </p>
    </div>
    <div class="footerNewsLetter">
      <h5>Sign To Newsletter</h5>
      <p>
        third paragraph
      </p>
    </div>
  </div>
</footer>

Answer №2

To achieve the desired effect of `margin: auto`, it is crucial to specify your center paragraph with `display:block`

Answer №3

Your understanding is not correct. Initially, you specified display:inline-block for all elements with the class .footer-content > div, and then you applied float to the first and third elements.

I recommend taking a look at this specific question and its answer which addresses a scenario similar to yours. It involves two opposing columns on the left and right, with a central column adjusting its width based on available space.

Answer №4

Adding on to @j08691's suggestion, include the style text-align:center; and also incorporate float:none;

footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;text-align:center; float:none;
}

Answer №5

Have you considered floating all of the divs to the left? By doing this, they will line up horizontally beside each other.

You can then adjust the margins to align the desired one in the 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

What is the best way for a client to showcase a constantly fluctuating server-side variable's value?

On my website's homepage (index.html), I want to show a dynamic server-side global variable called serverVariable. This variable is always changing based on the node.js server-side code. However, since the client doesn't know what serverVariable ...

javascripthtmlnode.js

Updating the navigation with a dynamic CSS class using jQuery

Hey there, I'm on the lookout for a simple and discreet method to dynamically add an "active" class to a navigation menu based on the current directory. Unfortunately, I am unable to modify the body tag with a custom class, ruling out a pure CSS solut ...

jquerycss

Perform mathematical operations on numbers using jQuery based on their index

Trying to manipulate numbers in the HTML with this less-than-ideal code. The display starts like this at the beginning: 1/ 6 And ends up like this at the final index: 6/ 6 Utilizing this in conjunction with pageslide.js as a workaround for the default ...

jqueryhtml

Passing image source from parent component to child component in Vue.js

I encountered an issue where I stored the image file name in a variable within the parent component and passed it to the child component using props. However, despite this setup, the child element is not displaying the image as expected. Here is the data ...

javascripthtmlvue.js

Tips for making a slide-in animation that doesn't require adjusting the browser size

As I work on an animation where an img object and text slide in from outside the frame of the webpage upon page load, everything seems to be running smoothly. But there's one glaring issue: right at the start of the page load, the webpage resizes for ...

javascripthtmlcssreactjscss-animations

The CSS property overflow:hidden or overflow:scroll is not functioning as expected when applied to a

On my practice website, I have set up a demonstration for showcasing text data. The issue arises when the user inserts an excessive amount of characters in the text box. To address this, I would like the text to be scrollable so that all content can be d ...

javascriptjqueryhtmlcss

passing a PHP variable into an HTML input field

Recently, I've encountered a problem where I need to transfer PHP variables to HTML input fields. echo $ManuellTagnavnMain; for ($n = 0; $n < 6; $n++) { print_r(++$ManuellTagnavnMain.PHP_EOL); } I'm looking for a way to pass these values ...

javascriptphphtml

CSS tip: Display only the latest x entries on a list

Can CSS be used to display only the most recent x items in a list? The code below reveals every item except the first two. How can I make it so that only the last two items are displayed in the list? ul li { display: none !important; } ul li:nth-las ...

htmlcss

How can JavaScript Regular Expressions be used for Form Validation?

For my registration form, I am including fields such as userid, name, email, password, confirm password, and affiliation. Using regular expressions in JavaScript, I am validating these fields. I am attempting to display any validation errors within the for ...

javascripthtmlbootstrap-4

Learn the process of sending information to a MySQL table using a select tag in PHP

I am attempting to use a select tag to submit data to a MySQL table using PHP. I have been successful in inserting data using the text type with the following code: <td> <label class="control-label">Image Type </label> </td> &l ...

phphtml

Is there a way to locate classes containing underscores within them using Selenium?

Having trouble scraping a webpage with a class name containing an underscore, specifically this element: <span class="s-item__time-left">30m</span> == $0 I attempted to locate it by class name: time = driver.find_elements_class_name("s-item_ ...

pythonhtmlseleniumweb-scrapingelement

The ion-range slider does not function properly when trying to display a central label

After customizing the ion range slider to suit my needs, I am looking for some simple functionalities: 1. The label should be centered. 2. When clicking on the label, the handle should move accordingly. 3. There should be a color gap between two valu ...

jqueryhtmltwitter-bootstraprangesliderion-range-slider

The child element with the specified position within the id element

Is it possible to highlight 'The second paragraph' of p id="dd" using nth-child? I noticed that when I add "#dd" in styles, it stops working properly. <!DOCTYPE html> <html> <head> <style> #dd p:nth-child(3) { back ...

htmlcsscss-selectors

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

htmlcss

The combination of sass-loader and Webpack fails to produce CSS output

Need help with setting up sass-loader to compile SCSS into CSS and include it in an HTML file using express.js, alongside react-hot-loader. Check out my configuration file below: var webpack = require('webpack'); var ExtractTextPlugin = require ...

javascriptcssexpresswebpacksass-loader

Creating a CSS dropdown menu with absolute positioning and setting the left position to auto

Just laying out my usual HTML menu structure: <div id="page"> <h1>Home</h1> <ul id="nav"> <li><a href="http://example.com/">Home</a> <ul> <li><a href="http://examp ...

htmlcssdrop-down-menu

Tips for achieving a design aesthetic similar to that of the JQuery UI website

On my website, I am using jQuery UI along with the "Smooth Default" CSS theme. However, I have noticed that everything appears larger compared to the jQuery UI website itself. For instance, when looking at the buttons here: http://jqueryui.com/button/ The ...

cssjquery-ui

Troubleshooting the Inline-Block Problem with Jquery Image Bubble Display

Recently, I've been exploring ways to eliminate the padding that is creating space between images before they align correctly. The culprit causing the padding seems to be the display: inline-block property. While it was suggested to have all the li t ...

css

Modify the background color of a div by selecting a hex code from a dropdown menu

Is there a way to utilize jQuery in order to alter the background of a <div> by choosing the HEX code from a separate dropdown menu? HTML <select id="target"> <option value="#c2c2c2">Grey</option> <option value="blue">Bl ...

javascriptjquerycss

Tips for ensuring that your website can recall which call-to-action (CTA) has been selected for redirection

I'm attempting to create a bilingual webpage in Spanish and English. My goal is to have a main page where the user selects the language, and once chosen, the page remembers the language preference for future visits instead of prompting the choice agai ...

javascripthtmlcssbutton