如何将带有段落的图像垂直居中？

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>