多行文本的HTML + CSS Wrap和Align按钮文本位置

Question

I'm making a set of buttons to be used on mobile with a defined min-width and a max-width to make sure the buttons don't grow too wide in size for mobile screen sizes.

The texts within the buttons vary in size, and to accomodate for longer length text I made sure I white-wrap them to the next line. However, when I do so, the button position gets shifted down, while the text still align (see picture: Baby Toddlers under 6).

How do I make sure so that all buttons align in-line with each other and at the same time make sure the text wraps when needed?

Thanks!

 #m-container { max-wdith:375px; width:375px; overflow:auto; height: 667px; max-height: 667px; border:1px solid black; } #m-search-ffv-carousel { padding:10px; overflow: auto; white-space: nowrap; float: left; margin-bottom: 0.5rem; } button.filter { background-color: #eee; border: 1px solid #ccc; color: #333; white-space: normal; cursor: pointer; overflow: hidden; text-align: center; margin-right: 0.65rem; min-width: 95px; max-width: 120px; min-height: 45px; text-transform: none; line-height: 16px; font-weight: 200; font-size: 0.775rem; display: inline-block; align-items: center; justify-content: center; top: 0px; 

 <h2>Mocked Mobile size</h2> <div id="m-container"> <div id="m-search-ffv-carousel"> <button class="filter" id="">Boys</button> <button class="filter" id="">Baby Toddlers under 6</button> <button class="filter" id="">Male</button> <button class="filter" id="">Female</button> <button class="filter" id="">Show more</button> </div> </div> 

Answer 1

Simply add vertical-align:top to button.filter.

 #m-container { max-wdith:375px; width:375px; overflow:auto; height: 667px; max-height: 667px; border:1px solid black; } #m-search-ffv-carousel { padding:10px; overflow: auto; white-space: nowrap; float: left; margin-bottom: 0.5rem; } button.filter { vertical-align:top; background-color: #eee; border: 1px solid #ccc; color: #333; white-space: normal; cursor: pointer; overflow: hidden; text-align: center; margin-right: 0.65rem; min-width: 95px; max-width: 120px; min-height: 45px; text-transform: none; line-height: 16px; font-weight: 200; font-size: 0.775rem; display: inline-block; align-items: center; justify-content: center; top: 0px; 

 <h2>Mocked Mobile size</h2> <div id="m-container"> <div id="m-search-ffv-carousel"> <button class="filter" id="">Boys</button> <button class="filter" id="">Baby Toddlers under 6</button> <button class="filter" id="">Male</button> <button class="filter" id="">Female</button> <button class="filter" id="">Show more</button> </div> </div>