html - CSS 行高属性问题

Question

我在我的网页中加入了一个 Material-Floating Button，该功能以我想要的方式完美运行。我遇到的唯一问题是我为它们设置的图标没有居中显示，而是出现在按钮的顶部。看起来 css line-height 不起作用。

我网页上显示的图片:Icon at top of Button

Material float 按钮链接:Material-Floating Button

图标应位于的演示链接:Demo

HTML代码:

<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> 

部分CSS代码:

.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

我认为您对行高的看法是正确的。是否有另一个 css 规则覆盖它？尝试添加 important 以更好地定位它。

line-height: 56px !important;

如果这不起作用，请在使用 #menu 和 .mfb-component__wrap 之类的 css 规则之前添加一些父元素

#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%; }

如果以上两种方法都不起作用，只需使用“top”作为解决方法。

#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; }

希望这对您有所帮助!