CODEWITHSUNDEEP
htmlcssalignmentmaterialize
David Gomes
David Gomes

Reputation: 5825

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.

Upvotes: 1

Views: 9984

Answers (5)

Maroo-b
Maroo-b

Reputation: 197

For anyone looking to center a button and a link it's possible to use the following snippet:

<div class="valign-wrapper">
  <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>

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

It's important to note that using Materialize valign-wrapper class will vertically align children elements but it will remove the spacing between them that's why we need to add a margin-left on the span children.

Upvotes: 2

Jimmy
Jimmy

Reputation: 2821

This is caused by MaterializeCSS's button style :

margin-bottom: 15px;

An alternate solution to Mousa Dirksz's span repositionning would be to remove the button's default margin :

HTML

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

CSS

.alternate-option button {
    margin-bottom: 0px;
}    

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

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 114990

Without knowing the full CSS, I suspect that you need to vertically align the button and span..such as:

button, span {
    vertical-align: middle;
}

Upvotes: 0

Mousa Dirksz
Mousa Dirksz

Reputation: 991

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

Upvotes: 2

Vijay
Vijay

Reputation: 114

Try this suggestion Use absolute positioning

CSS:

.alternate-option {
            position:absolute;
            left:numeric value*(adjust according screen size)*
            top:numeric value*(adjust according screen size)*
    }

Upvotes: -1

Related Questions