Question

＆＃13;

.msg-ex {
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.msg-ex .msg-ex-overlay {
  position: relative;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
}

.msg-ex .msg-ex-overlay .msg-ex-cta {
  position: absolute;
  color: red;
  background-color: #DCE0E3;
  font-size: 1.1em;
  font-weight: 700;
  border-radius: 18px;
  height: 38px;
  width: 100px;
  cursor: pointer;
  top: 50%;
  left: 50%;
  transform: translateX(-48%) translateY(-47%);
}

.msg-ex .msg-ex-overlay:hover {
  opacity: 1;
}

.msg-ex-box {
  position: relative;
  background-color: $voiceColor;
}

.msg-ex-box::after {
  content: '';
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background-image: url(../pics/data/img1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  z-index: 1;
}


}
.msg-ex-voice:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

＆＃13;

<div class="msg-ex msg-ex-box">
  <div class="msg-ex-overlay">
    <button class="msg-ex-cta">Show</button>
  </div>
</div>

＆＃13;

我正在定位我的＆＃34; Show＆＃34;使用transform: translateX(-48%) translateY(-47%);在中心的按钮，但理想情况下它应该是transform: translateX(50%) translateY(50%);使其居中 - 无法弄清楚我做错了什么。请帮忙。

Answer 1

那是因为.msg-ex-cta的父元素没有高度。当height: 100%;用于.msg-ex-overlay时，百分比高度需要继承的值，不会为其父级定义高度，因此100%的{{1}}为{{{ 1}}。

虽然向0添加0和width: 100vw;可能会让您获得所需内容，但有可能需要更改模式/叠加层的触发方式。虽然我并不了解您的确切目标，但我会将其保留原样，直至另行通知为止。

＆＃13;

height: 100vh;

＆＃13;

.msg-ex-overlay

＆＃13;

Answer 2

使用以下css作为要成为中心的按钮

display:flex;
align-items:center;
justify-content:center;

或

<RelativeLayout....
..........
..........
<LinearLayout
        android:visibility="gone"
        tools:visibility="visible"
        android:id="@+id/filter_area"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/lblTerminal"
            android:background="@color/lightGray"
            style="@style/PurpleSubtitle"
            android:drawableRight="@drawable/i_down_yellow"
            android:drawableEnd="@drawable/i_down_yellow"
            android:padding="10dp"
            android:text="@string/lblTerminal"
            android:layout_weight="5"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <View
            android:background="@android:color/black"
            android:layout_width="1dp"
            android:layout_height="match_parent"/>

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/lblCategory"
            android:background="@color/lightGray"
            android:padding="10dp"
            android:drawableRight="@drawable/i_down_yellow"
            android:drawableEnd="@drawable/i_down_yellow"
            style="@style/PurpleSubtitle"
            android:text="@string/lblCategory"
            android:layout_weight="5"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />


    </LinearLayout>
  .......
  .......
  </RelativeLayout>

Answer 3

如果你想把任何东西放在中心，把它放在父母的内部：

display: flex;
justify-content: center;

并将其添加到您想要居中的孩子身上：

align-self: center;

希望这有帮助！

Css定位按钮在覆盖的中心与图象在背景中

3 个答案: