[英]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. 我正在使用精简版Material Design,并尝试将内容左/右/中心对齐。 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-text,mdl-typography-text-center类,但是设计不是完美的,这里是屏幕截图
the pull-left and pull-right is working however center is not working. 左上拉和右上拉功能正常,但中心不起作用。 How can I achieve this ?
我该如何实现?
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 */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.