Question

我想问一下如何将我的标题与我的图像对齐，我的文字很长。有可能吗？

import urllib.request as rq
data = rq.urlopen("http://example.com/sample.html")
data.read()

CSS

<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>

上面的代码导致了这一点;

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

Answer 1

只需用图像的宽度组成一个div。然后使用图像作为backgroundimage并将内容对齐div中间。

以下示例：

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

.caption{
margin: auto;
}

Answer 2

如果你想拥有图像最大宽度的文字，你可以使用flex，background img ...只需更改图形到表格的显示并将其宽度设置为1px

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

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

Answer 3

我认为你应该将text-align:center放在figure

中

figure {
    text-align:center
}

Answer 4

可能会解决你的问题。

数字{max-width：330px; text-align：center; width：100％;}

Answer 5

假设您想要将图形的宽度调整为图像的宽度，而不知道设计时的像素宽度，可以使用min-content作为值。
这会将容器的宽度限制为其内容的宽度;在这种情况下，无论是图像，还是文本中最长的单词。请参阅MDN。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

免责声明：正如供应商前缀所示，这是一项实验性技术，所有浏览器都可能支持也可能不支持。（阅读：不是IE或Edge，只有Firefox和Chrome。）小心使用。

如何将标题与图像对齐？

5 个答案: