Question

我使用与{{1}相同的<div>创建了height，但是现在我对内部内容有疑问。

每个示例在width中都有一个简单的文本，如下所示：https://codepen.io/anon/pen/GYNXwr

div：

HTML

<div> <div class="center">TITLE </br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor porro animi iste quaerat corporis perferendis et!</div> </div>：

CSS

我想用一些标签将TITLE与TEXT分开，但我希望它们保持居中位置。我需要这样做是因为我只想在悬停时显示文本，所以我需要某种方式将其隐藏。

我曾想过将标题放在div { position: relative; background: orange; width: 20%; padding-top: 20%; overflow: hidden; } .center { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; width:100%; display: flex; align-items: center; }标签中，将文本放在<h>标签中，并且将<p>标签的可见性设置为隐藏，直到将鼠标悬停为止。但是，当我这样做时，标题变成<p>，文本变成left，我无法在文本上方得到标题。

Answer 1

使用flex-direction:column和justify-content: center。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

div.parent {
  position: relative;
  background: orange;
  width: 30%;
  padding-top: 30%;
  overflow: hidden;
}

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

p {
  display: none;
}

.center:hover p {
  display: block;
}

<div class="parent">
  <div class="center">
    <h1>TITLE</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor porro animi iste quaerat corporis perferendis et!</p>
  </div>
</div>

Answer 2

在这里，我在容器上使用display: flex将所有内容物保持在中心位置。我也为您添加了标签：）

div.simple-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  width: 250px;
  background-color: orange;
}

div.simple-text ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div.simple-text ul li {
  display: inline-block;
  padding: 3px 6px;
  background-color: #e8e8e8;
  border-radius: 3px;
}

div.simple-text p {
  display: none;
  text-align: center;
}

div.simple-text:hover p {
  display: block;
}

<div class="simple-text">
  <h3>TITLE</h3>
  <ul>
    <li class="simple-tag">lorem</li>
    <li class="simple-tag">ipsum</li>
  </ul>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor porro animi iste quaerat corporis perferendis et!
  </p>
</div>

具有与宽度相同的高度的Div，其中包含“非简单”内容

2 个答案: