垂直對齊內容和兩行文字

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個方框均相同。 在Google上搜索“內容”時遇到很大的困難，實際上並沒有提出CSS“內容”

這是一個小提琴： 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在容器元素上。 但是要當心，這將防止所有文本溢出，如果以后您想在框中包含很多文本，則將其隱藏。

要將文本居中放置在框內，請從偽元素中刪除寬度和高度，然后使用轉換技巧。 在要居中的元素上使用此元素（請記住使其容器相對）：

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;' 放在盒子上以防止這種情況。

在此處將內容與垂直對齊對齊可能不是一個好主意。 垂直對齊可能是真正的卑鄙行為。

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

也就是說，您應該查看本指南。 https://css-tricks.com/centering-css-complete-guide/

---

如果您堅持以這種方式居中，那么我建議您使用:: before和:: after->的結合來修改放置的內容，然后使用:: before將所有內容降低50％，然后啟動： ：之后是真實的內容。

（或只是絕對定位，變換並完成它）

如果您想舉例說明我要描述的內容，請發表評論，然后我會為您提供一些建議。

---

抱歉為之前的混淆。 抓取了錯誤的標簽網址

Answer 5

只需添加display: flex和align-items: center於你的：after選擇器，然后position: relative到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>