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垂直对齐任何元素。我尝试制作一个代码段，但我不确定您希望结果如何，因此我认为只给了您3条CSS以垂直居中。

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

Answer 2

如果您不想设置相对位置，则可以使用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示例（usefull 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>

如何在图像上垂直放置段落？

3 个答案: