Question

我在我的网页上加入了一个Material-Floating按钮，功能完全按照我想要的方式运行。我遇到的唯一问题是我为它们设置的图标不会显示居中，但会显示在按钮的顶部。似乎css行高不起作用。

我的网页上显示的内容的图片：Icon at top of 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规则在某处超越它？尝试添加并重要一点，以便更好地定位它。

line-height: 56px !important;

如果这不起作用，请在你的#ssu规则之前添加一些父元素，例如#menu和.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%; }

如果上述任何一项工作都没有使用＆＃39; top＆＃39;作为一种解决方法。

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

希望能为你排序！

CSS line-height属性问题

1 个答案: