CODEWITHSUNDEEP
cssangularjsangular-material
Flash
Flash

Reputation: 1014

Angular-Material Md-divider

Is it possible to get a button to be on top of an md-divider kind of like this: enter image description here

Upvotes: 1

Views: 1040

Answers (1)

Yaser
Yaser

Reputation: 5719

That is nothing to do with Angular, you can fix it by pure css:

body{
                background-color: #E0E0E0;
                text-align: center;
            }
            h1{
                font-size: 75px;
            }
            hr{
                width: 85%;
            }
            .buttons{
                display:inline-block;
                position:relative;
                top:-20px;
                background-color: green;
                color: white;
                padding: 5px;
                border: 1px solid green;
                border-radius: 50px;
                text-align: center;
            }
            .buttons:hover{
                background-color: #C4C4C4;
                border: 1.5px solid #171717;
            }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<h1>Button on top of line</h1>
     <hr>
     <span class="buttons fa fa-plus"></span>

You can give your Md-divider a class and use that instead of my hr example. But you get the idea right?

The point is to use positioning with negative top.

Upvotes: 2

Related Questions