CSS行高属性问题

Question

I incorporated a Material-Floating Button to my web page and the functionality is working perfectly the way I want it to. The only issue I am having is the icons I have set up for them are not appear centered but, appears at the top of the button. It appears that the css line-height is not working.

Image of what appears on my webpage: Icon at top of Button

Link for Material-Floating Button: Material-Floating Button

Link for Demo of where the icon should be at: Demo

HTML Code:

<ul class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
  <li class="mfb-component__wrap">
      <!-- the main menu button -->
      <a href="#" class="mfb-component__button--main">
        <!-- the main button icon visible by default -->
        <i class="mfb-component__main-icon--resting ion-plus-round"></i>
        <!-- the main button icon visible when the user is hovering/interacting with the menu -->
        <i class="mfb-component__main-icon--active ion-close-round"></i>
      </a>
      <ul class="mfb-component__list">
        <!-- a child button, repeat as many times as needed -->
        <li>
          <a href="#" data-mfb-label="Edit This Action" class="mfb-component__button--child">
            <i class="mfb-component__child-icon ion-edit"></i>
          </a>
        </li>
      </ul>
  </li>
</ul> 

Part of CSS Code:

.mfb-component__button--main, .mfb-component__button--child {
  background-color: #E40A5D;
  display: inline-block;
  position: relative;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
  -webkit-user-drag: none;
  color: #f1f1f1; }

/**
 * This is the unordered list for the list items that contain
 * the child buttons.
 *
 */
.mfb-component__list {
  list-style: none;
  margin: 0;
  padding: 0; }
  .mfb-component__list > li {
    display: block;
    position: absolute;
    top: 0;
    right: 1px;
    padding: 10px 0;
    margin: -10px 0; }

/**
 * These are the basic styles for all the icons inside the main button
 */
.mfb-component__icon, .mfb-component__main-icon--active,
.mfb-component__main-icon--resting, .mfb-component__child-icon {
  position: absolute;
  font-size: 18px;
  text-align: center;
  line-height: 56px;
  width: 100%; }

.mfb-component__wrap {
  padding: 25px;
  margin: -25px; }

Answer 1

I think you're right about the line-height. Is there another css rule somewhere over-riding it? Try adding and important to target it a bit better.

line-height: 56px !important;

If that doesn't work add some parent elements before you're css rule like #menu and .mfb-component__wrap

#menu .mfb-component__wrap i.mfb-component__main-icon--active.ion-close-round{
  position: absolute;
  font-size: 18px;
  text-align: center;
  line-height: 56px;
  width: 100%; }

If neither of the above work just use 'top' as a workaround instead.

#menu .mfb-component__wrap i.mfb-component__main-icon--active.ion-close-round{
  position: absolute;
  font-size: 18px;
  text-align: center;
  line-height: 0px;
  width: 100%;
  top: 17px; }

Hope that sorts it for you!