Question 205544 in Html Question posted in
Some basic documentation can be found here.

Html – css vertical align of button elements within div, can't figure out why elements are creating more vertical space than defined by css margin

my work-in-progress page is at this website

i thought the hard part about this page was the script and style to filter results, but the filter part is actually working just as intended, it’s just a style/alignment issue that has me stumped

the section that i’m having issues with is the main content div myBtnContainer – where you see the gray blocks used to sort the results below, ALL, CURRENT, ACOUSTIC, etc.

as you can see, any of the buttons which have two lines of text (which was auto-wrapped) is creating additional white space above the button itself – you’ll see that COLOR CHANGING is the first button where this occurs – this not only pushes the button down, but then pushes the starting point for the row below down as well

i’m very much at an entry level here – just smart enough to google the pieces and parts i need and copy/paste/edit with trial and error – that’s usually enough to get by but this time i’m at a dead end

any help would be appreciated

i’ve poked through developer tools in safari to check if it’s a padding issue, and as far as i can tell it is not, but that’s about the only thing i’m smart enough to troubleshoot (or maybe not even that…)

Tags:

2

Answers


  1. 0

    you could use flex box like this

    #myBtnContainer {display:flex;flex-wrap: wrap;}

    This will vertically align the items by default

    Login or Signup to reply.
  2. 0

    Indeed using flexbox would be the recommended way for you, like @Austin mentioned.
    In detail it should be sufficient to add the following css to the page:

    #myBtnContainer {
    display: flex;
    flex-direction: row; /* optional, because it's the default */
    flex-wrap: wrap;
}

    You might take a closer look at flexbox, it’s a pretty basic and important system to use on websites. I would recommend the following webpage: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search