CSS CSS Selectors Selectors - Beyond the Basics DRY CSS

Posted by J V
J V
4,471 Points

How would I center the buttons with the class .inln after the browser meets the criteria for the media query?

https://w.trhou.se/z9kimsi8p4

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

Eliyah Kohein
Eliyah Kohein
20,912 Points

I'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/

J V
J V
4,471 Points

Thank You! I haven't used flex yet. Seems to work fine. I will definitely keep this in mind for future use.

Eliyah Kohein
Eliyah Kohein
20,912 Points
Eliyah Kohein
Eliyah Kohein
20,912 Points

If flexbox doesn't suit you try adding:

position: relative;
left: 30%;

to the .inln class