Question

我在设置我的div时，在图像上集中了一个文字。

＆＃13;

.event-list img {
  display: block;
  width: 100%;
}

.description {
  position: absolute;
  display: inline-block;
  color: #FFF;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.card {
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-style: solid;
  border-width: 5px;
  border-color: #FFF;
  margin-top: 1.5em;
}

＆＃13;

<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=1" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 1</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=2" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 2</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

＆＃13;

jsfiddle

我试图用自己的文字描述来实现每个图像。文本重叠且无响应（适用于大屏幕）

提前致谢

Answer 1

设置相对于.event-list

的位置

.event-list {
  position:relative;
}

.event-list img {
  display: block;
  width: 100%;
}

.description {
  position: absolute;
  display: inline-block;
  color: #FFF;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
.description h3 {
  margin-top: 0;
}

.card {
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-style: solid;
  border-width: 5px;
  border-color: #FFF;
  margin-top: 1.5em;
}
.event-list {
  position:relative;
}

<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=1" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 1</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=2" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 2</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

Answer 2

只需将position:relative添加到.card，以便.description知道它的相对位置。

.card {
      position: relative;
      // rest of style
 }

＆＃13;

.event-list img {
  display: block;
  width: 100%;
}

.description {
  position: absolute;
  display: inline-block;
  color: #FFF;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.card {
  position: relative;
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-style: solid;
  border-width: 5px;
  border-color: #FFF;
  margin-top: 1.5em;
}

＆＃13;

<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=1" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 1</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=2" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 2</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

＆＃13;

Answer 3

我想你忘记了

.event-list { position: relative; }

Answer 4

你需要的只是给你的.card职位：亲属

.card{
  position: relative;
}
.event-list img {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.description {
  position: absolute;
  box-sizing: border-box;
  display: inline-block;
  color: #FFF;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.card {
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-style: solid;
  border-width: 5px;
  border-color: #FFF;
  margin-top: 1.5em;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=1" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 1</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=2" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 2</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

Answer 5

设置相对于班级.card或.event-list的位置。

以img为中心

5 个答案: