We help IT Professionals succeed at work.

How to center my buttons and give them space among them?

hidrau
hidrau asked
on
Hello guys

I am studying html and css.

I got a code for buttons and I added in my page.

But I am having troubles to center them in horizontal form and give them certain space among them.

could you help me?

this is the link:

http://www.teachmenow.com.br/guardasol/index.html

regards
Alexandre
Comment
Watch Question

Olaf DoschkeSoftware Developer

Commented:
Without looking at your site, the solution is to center a div and within that div use a flexbox with justify-content: space-between.
See https://css-tricks.com/equidistant-objects-with-css/

https://jsfiddle.net/zenxc7tq/ demos this.

Bye, Olaf.
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Firstly - your container botaocss has a defined width of 500px - this is going to limit the space for the buttons so remove the width or make it bigger
#botaocss {
	font-family: Arial, Trebuchet MS;
	font-size: 20px;
	/* width: 500px; */ /* <== CHANGE OR REMOVE THIS */
}

Open in new window


Secondly, your buttons are defined as display: block which will force them on a new line - try defining them as inline-block as follows
#botaocss a {
	display: inline-block; /* <=== CHANGE THIS */
	background: #70B02C;
	color: #FFFFFF;
	text-shadow: 0px 1px 0px #111111;
	text-align: center;
	border: solid 1px #538C17;
	border-radius: 5px;
	box-shadow: 0px 2px 3px #A9A9A9;
	padding: 10px 20px 10px 20px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
}

Open in new window

Author

Commented:
it didn't do what I want to do

I want to place the three buttons in the center of my div, each button bellow the other and in the center of my container.

I did what Julian asked me to do, but it didn't give the result, please, take a look at.

I need my buttons with 500px

thanks
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Apologies I thought you wanted them like this
[button]   [button] [button]
Whereas you wanted
              [button]

              [button]

              [button]

You can go with your original implementation. Simply add
margin: 0 auto
To the container
and margin: 15px 0 to the button
Like so
#botaocss {
	font-family: Arial, Trebuchet MS;
	font-size: 20px;
	width: 500px;  /* <== THIS CAN ALSO GO BACK TO WHAT IT WAS DEPENDING ON HOW WIDE YOUR BUTTONS MUST BE */
	margin: 0 auto; /* <=== ADD THIS */
}

Open in new window

#botaocss a {
	display: block; /* <=== SET THIS BACK TO block */
	background: #70B02C;
	color: #FFFFFF;
	text-shadow: 0px 1px 0px #111111;
	text-align: center;
	border: solid 1px #538C17;
	border-radius: 5px;
	box-shadow: 0px 2px 3px #A9A9A9;
	padding: 10px 20px 10px 20px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	margin: 15px 0; /* <== ADD THIS */
}

Open in new window

Olaf DoschkeSoftware Developer
Commented:
You can also go into column direction with flexbox, see https://jsfiddle.net/zenxc7tq/1/

Bye, Olaf.

Author

Commented:
thanks a lot for your help
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.