CODEWITHSUNDEEP
javascripthtmlcss
Sergio Toledo Piza
Sergio Toledo Piza

Reputation: 788

CSS based on element height?

I have a button that changes its height based on the screen size because of the text line-breaking.

When the screen size is large enough, the button fits perfectly:

enter image description here

But when it gets smaller, the button stops being centered:

enter image description here

I tried applying @media settings:

@media (max-width: 767px) {
    #footer-content input[type="button"],
    #footer-content button {
        margin-top: -22px;
    }
}

@media (min-width: 768px) {
    #footer-content input[type="button"],
    #footer-content button {
        margin-top: -10px;
    }
}

And when the line break happens, it works perfectly:

enter image description here

But when it doesn't and the screen is smaller than 767px, it gets decentered again:

enter image description here enter image description here

So I was hoping there was anyway of doing the CSS based on the button's height instead of the screen's width, but the research I've been making hasn't helped much, so, is there anyway of doing this via CSS or will I be forced to use javascript?

Upvotes: 0

Views: 68

Answers (2)

subramanian
subramanian

Reputation: 1305

you can use display table and vertical align middle property so that the button and the range slider are always at the center of the container , something like the code below

      <div>
          <div style="display:table">
               <div style="display:table-cell;vertical-align:middle"><input type='range'></div>
               <div style="display:table-cell;vertical-align:middle"><input type="submit" value = 'something'/></div>   
          </div>
      </div>

Upvotes: 0

jas7457
jas7457

Reputation: 1782

Try using flexbox. If this is actually an input type range you shouldn't even need to specify align-items: center; to get it to work. https://jsfiddle.net/vo4xcrm5/

CSS

.wrapper {
  display: flex;
  margin-top: 100px;
}

.range {
  width: 100%;
}

.button {
  max-width: 15%;
}

HTML

<div class="wrapper">
  <input class="range" type="range" />
  <span class="button">
    Some type of button-like thing
  </span>
</div>

Upvotes: 0

Related Questions