Question

我有5个框，其中包含悬停时更改的文字。

然而，如果＆＃39;内容＆＃39;一个盒子有一条以上的线条，它会略微推下其他盒子。

另外，如何垂直居中？行高是作业，但有些文本不止一行。垂直对齐似乎也适用于整个div而不仅仅是内容中的文本

＆＃13;

 .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';

    }

＆＃13;

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

＆＃13;

这里是CSS，除了不同的内容外，所有5个框都相同。在搜索＆＃34;内容＆＃34;时遇到大量困难。谷歌并没有真正想出CSS＆＃34;内容＆＃34;

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

Answer 1

好的，请尝试将vertical-align: top添加到您的图片类

.image{
    vertical-align: top;
}

Answer 2

试试这个： -

.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 3

要解决换行问题，只需将overflow: hidden放在容器元素上即可。但请注意，如果您以后想要在框中包含大量文本，这将阻止所有文本溢出意义。

要将框内的文本居中，请从伪元素中删除宽度和高度，然后使用变换hack。在想要居中的元素上使用它（记住使其容器相对）：

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

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

Answer 4

https://jsfiddle.net/4tmx5f46/

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

字体声明导致了下拉框。你需要'vertical-align：middle;'盒子本身就是为了防止这种情况发生。

将中间的内容与vertical-align对齐可能是一个坏主意。垂直对齐可能是一个真正的卑鄙小人。

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

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

如果你坚持以这种方式集中，那么我建议你使用:: before和:: after - ＆gt;的结合来修改所放置的内容。使用:: before将所有内容击倒50％，然后使用真实内容启动:: after。

（或者只是绝对定位，转换，并完成它）

如果你想要一个我正在描述的例子，评论，我会为你做点什么。

早些时候混淆道歉。抓住错误标签的网址

Answer 5

只需将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>

垂直对齐内容和2行文字

5 个答案: