• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Why is the following CSS code not centering my button horizontally within a div element?

 
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Why is the following CSS code not centering my button horizontally within a div element? It appears off-center in my webpage:



The button seems to be slightly toward the left side within the container. What am I missing in the CSS that is preventing the button from being perfectly centered?
 
Bartender
Posts: 217
7
Android Python Oracle Postgres Database Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I don't see your problem. In Firefox and Chrome / both on Linux the button is centered ok.



central_button_example.png
example
example
 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi there, I may not be experienced enough, but I see no problem either.
 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It worked for me in the codepen: https://codepen.io/Rail-Batyrshin/pen/wvRLyLe
 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The CSS code you gave me seems correct for centering the button horizontally within the div element. However, there might be some external factors affecting the layout. Here are a few things you can check:

1. Default Margin of the Body:
  If the body has a default margin, it can affect the centering. Try adding the following CSS rule to remove the default margin:

  body {
    margin: 0;
  }

2. Box Sizing:
  Ensure that the box-sizing property is set to border-box to include padding and borders in the element's total width:

 * {
    box-sizing: border-box;
  }

3. Parent Container Size:
  Confirm that the parent container (div with class "container") doesn't have a fixed width that might be affecting the centering.

  .container {
    width: 100%; /* or any other value you need */
    display: flex;
    justify-content: center;
    align-items: center;
  }


4. Other Styles:
  Check if there are any other styles applied to the button or its parent container that might be affecting the centering.

By checking and adjusting these aspects, you should be able to ensure that the button is centered horizontally within the div element. If the issue persists, there might be additional code or external factors affecting the layout that are not provided in the snippet.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic