Search code examples
htmlcssalignmentmaterialize

Aligning text next to a button with materialize CSS

I have a button and some text next to it. I'd like to match the text's vertical alignment with the button's. Here's what I have now:

enter image description here

Basically, I'd like the or Sign Up text to go a bit higher. I'm using MaterializeCSS as well. Here's the code I have for this:

HTML

<div class="center">
  <button class="btn waves-effect waves-green green darken-1">Sign In</button>
  <span class="alternate-option">or <a href="#">Sign Up</a></span>
</div>

CSS

.alternate-option {
  margin-left: 20px;
}

I have tried using padding-bottom as well as margin-bottom.

Solution

  • Try to use:

    .alternate-option {
  margin-left: 20px;
  vertical-align: baseline;
  position: relative;
  top:-5px;
}

    Also look at: http://www.w3schools.com/cssref/pr_class_position.asp