CODEWITHSUNDEEP
cssmaterial-designmaterial-design-litegwt-material-design
San Jaisy
San Jaisy

Reputation: 17108

Left , center and right in a row alignment in material design lite

I am using material design lite and tried to align the content in left / right / center. However not able to perform the it. Here is the code

 <div class="mdl-card__actions mdl-card--border">

                    <button id="share-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect pull-left">
                        <i class="material-icons">share</i>
                    </button>
                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for="share-menu">
                        <li class="mdl-menu__item">Some Action</li>
                        <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
                        <li disabled class="mdl-menu__item">Disabled Action</li>
                        <li class="mdl-menu__item">Yet Another Action</li>
                    </ul>
                    <span class="mdl-chip mdl-chip--contact center-block">
                        <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">12</span>
                        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">thumb_up</i></button>
                    </span>
                    <button class="mdl-button mdl-button--icon mdl-button--colored pull-right"><i class="material-icons">add_shopping_cart</i></button>
                </div>

I tried center-text , mdl-typography--text-center class but the design is not perfect here is the screen shot

center div

the pull-left and pull-right is working however center is not working. How can I achieve this ?

Upvotes: 1

Views: 2888

Answers (1)

Rohit Sharma
Rohit Sharma

Reputation: 3334

It will work try it:

.mdl-card__actions {text-align:center;} /* will make the text in center */
.mdl-chip--contact {display: inline-block; float: none;} /* because it is inline-block it will be affected by text-align property in parent element */

Upvotes: 1

Related Questions