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

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
LVL 1
hidrauAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Olaf DoschkeSoftware DeveloperCommented:
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.
Julian HansenCommented:
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

hidrauAuthor 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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Olaf DoschkeSoftware DeveloperCommented:
You can also go into column direction with flexbox, see https://jsfiddle.net/zenxc7tq/1/

Bye, Olaf.
hidrauAuthor Commented:
thanks a lot for your help
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.