Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
J V
4,471 PointsHow would I center the buttons with the class .inln after the browser meets the criteria for the media query?
Above is the code. I know this has been asked before, but I am wondering if there is a "cleaner" solution. I tried adding margins/padding, however there was no change to the positioning of the submit or reset buttons.
2 Answers
Darrell Conklin
Python Development Techdegree Student 22,377 PointsI'm not sure exactly where you would like the buttons to be placed or how much spacing you want between them but you could always try flexbox. It seems cleaner to me but it's newer so not so widely supported.
ā Start by wrapping your buttons in a <span> and give it a class called flex.
<span class="flex">
<input class="btn default inln" type="submit" value="Submit">
<input class="btn error inln" type="reset" value="Reset">
</span>
ā Go to you stylesheet and add the following code:
.flex {
display: flex;
justify-content: space-around;
}
If you would like to see some of the options available with flexbox visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Darrell Conklin
Python Development Techdegree Student 22,377 PointsIf flexbox doesn't suit you try adding:
position: relative;
left: 30%;
to the .inln class
J V
4,471 PointsJ V
4,471 PointsThank You! I haven't used flex yet. Seems to work fine. I will definitely keep this in mind for future use.