asked on 11/20/2017

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

CSS HTML

Last Comment

Julian Hansen

11/28/2017

Olaf Doschke

11/20/2017

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 Hansen

11/20/2017

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

hidrau

11/20/2017

ASKER

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

ASKER CERTIFIED SOLUTION

Julian Hansen

11/20/2017