Google Homepage, CSS, buttons not centering

HTML-CSS
1

Hello. I’m currently trying to build the Google Homepage. The issue that I’m having at the moment is when I try to center two buttons, the “Google Search” button and the “I’m Feeling Lucky” button.

The method that I’m using right now involves creating two buttons and putting them inside the wrapper, in HTML. I then go to CSS, and within my “wrapper-button” class, I set…

  1. display: block;
  2. margin-left: auto;
    margin-right: auto;
    3.width: 100%

However despite this, it will not center. Here’s a link to my codepen. https://codepen.io/macwin16/pen/qBRdZVW

Any help or suggestions will be greatly appreciated.

2

There are several ways to approach this. Do you know how to center text in a <p>? You can use the same method to center content (such as buttons) inside any block element (such as a div).

Also, you don’t need to explicitly set display: block on a div because that is the default. The reason the auto side margins are not working right now is because the div takes up 100% of the width, so there is no room for side margins to begin with. The auto side margins method only works when the width of the element is less than the available width of its parent.

1 Like
3

Thank you for your help.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.