CODEWITHSUNDEEP
htmlcss
alchuang
alchuang

Reputation: 3571

HTML + CSS Wrap and Align button text position for multi-line text

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).

"Baby Toddler under 6 button" is shifted downwards..

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>

Upvotes: 0

Views: 2464

Answers (1)

Neil
Neil

Reputation: 14321

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>

Upvotes: 2

Related Questions