垂直对齐内容和2行文字

Question

我有5个包含悬停时发生变化的文本框。

但是，如果一个箱子的“内容”有多条线路，它会将其他箱子轻微推下。

另外，如何垂直居中内容？行高确实是工作，但有些文本不止一行。另外垂直对齐似乎适用于整个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盒相同。 有排序这是搜索在谷歌的“内容”并没有真正拿出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到：元素之后

所以更新的代码会是这个样子

.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

试试这个： -

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

要修复换行问题，只需将overflow: hidden放在容器元素上。但是要小心，但是这样可以防止所有文本溢出，这意味着如果以后想要在文本框中放置大量文本，它将被隐藏。

要将盒子中的文本居中放置，请从伪元素中移除宽度和高度，并使用变换黑客。在要居中的元素使用这个（记得要使它的容器相对）：

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

最后，利用Flexbox，就当所有的这些问题都不再是问题，所以我建议学习，由于它的真棒。

Answer 5

https://jsfiddle.net/4tmx5f46/

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

字体声明是导致盒子的下拉列表。你需要'vertical-align：middle'在箱子本身，以防止这种情况。

在垂直对齐的中间对齐内容可能是一个坏主意。垂直对齐可以是一个真正的卑鄙小人。

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

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

---

如果你坚持围绕这种方式，那么我建议你修改的内容放在通过之前使用::连词，后:: - >使用::前敲下来的一切增加50％，然后用真实内容启动:: after。

（或只是绝对位置，转换和用它做）

如果你想要什么我描述，注释的例子，我就炮制出东西给你。

---

以前的混淆道歉。抓住了一个错误标签的网址