如何將帶有段落的圖像垂直居中？

Question

我正在嘗試將圖像和左浮動段落垂直居中對齊。 我需要浮動段落而不是圖像，因為我希望圖像出現在移動設備上的段落下方。 這是我的代碼：

 img { position: relative; max-width: 100%; left: 50%; transform: translateX(-50%); } h3 { clear: both; } @media only screen and (min-width: 650px) { p { float: left; max-width: 50%; } img { max-width: 50%; right: 0; transform: translateX(-100%); } }

 <h3>Header</h3> <p>texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttextt exttexttextte xttexttexttex ttexttexttext texttexttextt exttexttextte xttexttexttex ttexttexttextte xttexttexttextt exttexttexttext texttexttexttex ttexttexttextte xttexttexttextt exttex ttexttexttexttex ttexttexttexttexttext</p> <img src="w3css.gif"> <h3>Header</h3>

現在，圖像與段落的頂部對齊，但我希望圖像和段落彼此居中對齊。 在這里尋找 CSS 解決方案，提前致謝。

Answer 1

您可以使用此 CSS 垂直對齊任何元素。 我試圖制作一個片段，但我不確定你想要的結果是什么樣的，所以我想我只是給你 CSS 的 3 行需要垂直居中任何東西。

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 2

如果您不想設置相對 position，可以使用 flex。

display: flex;
align-items: center;
justify-content: center;
flex-flow: row;

Answer 3

flex和grid可以提供幫助（body 用於容器）

flex示例（有用的 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ）

 img { margin: auto; max-width: 100%; } @media only screen and (min-width: 650px) { body { display: flex; flex-wrap: wrap } h3 { min-width: 90%; flex-grow: 1 } p { max-width: 50%; } img { max-width: 50%; } }

 <h3>Header</h3> <p>texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttextt exttexttextte xttexttexttex ttexttexttext texttexttextt exttexttextte xttexttexttex ttexttexttextte xttexttexttextt exttexttexttext texttexttexttex ttexttexttextte xttexttexttextt exttex ttexttexttexttex ttexttexttexttexttext</p> <img src="w3css.gif"> <h3>Header</h3>

grid示例（有用的 https://css-tricks.com/snippets/css/complete-guide-grid/ ）

 img { margin: auto; max-width: 100%; } @media only screen and (min-width: 650px) { body { display: grid; grid-template-columns: repeat(2, 1fr) } h3 { grid-column: 1 / span 2 } }

 <h3>Header</h3> <p>texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttext texttexttextt exttexttextte xttexttexttex ttexttexttext texttexttextt exttexttextte xttexttexttex ttexttexttextte xttexttexttextt exttexttexttext texttexttexttex ttexttexttextte xttexttexttextt exttex ttexttexttexttex ttexttexttexttexttext</p> <img src="w3css.gif"> <h3>Header</h3>