如何將字幕與圖像對齊？

我想問我如何將我的標題與我的圖像對齊，我有一個非常長的文字。可能嗎？如何將字幕與圖像對齊？

<figure> 
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=330%C3%97180&w=330&h=180"> 
<figcaption>Adjusting to school is a noteworthy move in a youthful grown-up's life. For some, the move incorporates moving out of the family home surprisingly, making new companions, and confronting expanded academic demands. 
</figcaption> 
</figure>

CSS

figure { 
display: inline-block; 
margin: 20px; 
} 

figure img { 
vertical-align: top; 
} 

figure figcaption { 
text-align: center; 
}

上面的代碼導致此;

I COULDN'T UPLOAD IT BECAUSE IT SAYS I NEED 10 REPS TO POST IMAGES, I'M VERY VERY SORRY

來源

2017-04-12 Anj Briones

只要下定一個div與圖像的寬度。然後使用該圖像作爲backgroundimage並將您的內容對齊到div的中間。下面

例子：

.div{ 
display: flex; 
height: 200px; 
width: 100%; 
background-image: url("paper.gif"); 
} 

.caption{ 
margin: auto; 
}

來源

2017-04-12 09:46:50 Smokinggunz

請添加一個JSFiddle，以便我們可以看到代碼輸出並對其進行自定義。 – Nieck

這裏使用figure和figcaption更加語義化，將其改爲使用div並不理想。 –

我想你應該把text-align:center在figure

figure { 
    text-align:center 
}

來源

2017-04-12 09:49:50 Littlee

如果你想有一個與圖像的最大寬度，withou彎曲，背景IMG文字.. 。只需將圖形的顯示更改爲表格並將其寬度設置爲1px

figure { 
    margin: 20px; 
    display: table; 
    width: 1px; 
}

https://fiddle.jshell.net/b201khsy/

來源

2017-04-12 09:54:48

可能會發現你的問題。

圖面最大寬度：330px;文本對齊：中心;寬度：100％;}

來源

2017-04-12 10:15:05

假設你要調整的數字到圖像的寬度的寬度，不知道什麼樣的寬度以像素爲單位是在設計時，您可以使用min-content作爲值。
這將限制容器的寬度爲其內容的寬度;在這種情況下，無論是圖像，還是文本中最長的單詞。見MDN。

figure { 
 
    display: inline-block; 
 
    margin: 20px; 
 
    width: -webkit-min-content; 
 
    width: -moz-min-content; 
 
    width: min-content; 
 
} 
 

 
figure img { 
 
    vertical-align: top; 
 
} 
 

 
figure figcaption { 
 
    text-align: center; 
 
}

<figure> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=330%C3%97180&w=330&h=180"> 
 
    <figcaption>Adjusting to school is a noteworthy move in a youthful grown-up's life. For some, the move incorporates moving out of the family home surprisingly, making new companions, and confronting expanded academic demands. 
 
    </figcaption> 
 
</figure>

免責聲明：您可以通過供應商前綴看到，這是一個實驗性的技術，可能會或可能不會被所有的瀏覽器都支持。（請閱讀：不能通過IE或Edge，只能使用Firefox和Chrome。）請小心使用。

來源

2017-04-12 10:21:10

如何將字幕與圖像對齊？

回答

相關問題