垂直对齐内容和 2 行文本

Question

我有 5 个框，其中包含在悬停时会发生变化的文本。

但是，如果一个框的“内容”不止一行，它会将其他框略微向下推。

另外，如何使内容垂直居中？ Line-height 可以胜任，但有些文本不止一行。垂直对齐似乎也适用于整个 div 而不仅仅是内容中的文本

 .image { 
    width: 204px; 
    height: 204px;
    background-image: url('imglink');
    display: inline-block;
    background-repeat: no-repeat;
    margin-left: 22px;
    margin-right: 22px;
    font-family: "Verdana", Geneva, sans-serif;
    color: white;
    font-size: 11pt;
    }

    .image:hover{
    cursor: pointer;
    
    }

    .image:after { 
    width: 204px; 
    height: 204px;
    display: inline-block;
    background-repeat: no-repeat;
    /* Content is inserted */
    content: 'This text is already there';

    }

    .image:hover:after{
    background-image: url('/imglink');
    cursor: pointer;
    content: 'This text will appear on hover';

    }

 <div class="image">
     </div>

这是 CSS，除了内容不同之外，所有 5 个框都相同。 将其排序为在 Google 上搜索“内容”时遇到巨大困难并没有真正想出 CSS“内容”

这是一个小提琴：https://jsfiddle.net/su8bytdc/7/

Answer 1

只需将 display: flex 和 align-items: center 添加到您的 :after 选择器，并将 position: relative 添加到您的 div .image。

要水平对齐内容，只需将 text-align: center 添加到 .image 和 justify-content: center 到 :after 元素

所以你更新的代码看起来像这样

.image {
  position: relative;
  width: 204px;
  height: 204px;
  display: inline-block;
  background-color: red;
  margin-left: 22px;
  display: inline-block;
  margin-right: 22px;
  font-size: 11pt;
  cursor: pointer;
  text-align: center;
}
.image:after {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Content is inserted */
  content: 'This text is already there Even multiple lines';
}
.image:hover:after {
  text-align: center;
  content: 'This text will appear on hover';
}

<div class="image">
</div>
<div class="image">
</div>
<div class="image">
</div>
<div class="image">
</div>
<div class="image">
</div>

Answer 2

好的，所以尝试将vertical-align: top 添加到您的图像类

.image{
    vertical-align: top;
}

Answer 3

要解决换行问题，只需将overflow: hidden 放在容器元素上即可。但是请注意，如果您以后想要在一个框内有很多文本，它将被隐藏，这将防止所有文本溢出含义。

要使框内的文本居中，请从伪元素中移除宽度和高度，并使用变换技巧。在要居中的元素上使用它（记住使其容器相对）：

position: absolute; (relative could also work here)
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

最后，所有这些问题在使用 flexbox 时都不再是问题，所以我建议学习一下，因为它很棒。

Answer 4

试试这个：-

.image img {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
 ====================================
   Base styling, to make the demo more fancy
   ==================================== */
body {
  font-family: Roboto, sans-serif;
  background: #2C3D51;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
 
}



h2 p {
 text-align:center;
  margin: 0;
  font-size: 16px;
  position: absolute;
  top: 5px;
  right: 5px;
  font-weight: bold;
  color: #ECF0F1;
}

section {
  display: block;
  max-width: 500px;
  background: #E74C3C;
  margin: 0 auto 15px;
  height: 150px;
  border-radius: .2em;
  position: relative;
  color: white;
  text-align:center;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

<section class="text"> <h2>Text</h2>  <p>I'm vertically aligned! Hi ho Silver, away!</p></section><section class="image">  <h2>Images</h2>  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=120%C3%9770&w=120&h=70">

Answer 5

https://jsfiddle.net/4tmx5f46/

  font-family: "Verdana", Geneva, sans-serif;
  vertical-align:middle;

字体声明导致框的下拉。你需要'vertical-align:middle;'在盒子本身上以防止这种情况发生。

使用vertical-align 对齐中间的内容在这里可能是个坏主意。 Vertical Align可以是一个真正的渣男。

来源： http://christopheraue.net/2014/03/05/vertical-align/

也就是说，您应该查看本指南。 https://css-tricks.com/centering-css-complete-guide/

---

如果您坚持以这种方式居中，那么我建议您使用 ::before 和 ::after 的连词来修改放置的内容 -> 使用 ::before 将所有内容降低 50%，然后以真实内容开始 ::after。

（或只是绝对定位、转换并完成）

如果您想要我所描述的示例，请发表评论，我会为您制作一些东西。

---

为之前的混淆道歉。抓取了错误的标签页网址