Question

我正在尝试将图像居中并在其下放置一些文本。我可以将文本居中，但是当我尝试将其向左或向右移动时，它会流过图像。我不确定如何将这些文字保留在图像边框内。

HTML：

Framework

我理解这会使图像居中，而且使文本居中，但是如果我尝试将文本包裹在一个跨度中并告诉它向左或向右浮动，那就是它超出图像的位置。

Answer 1

您在想这种事情吗？

我刚刚将display: flex添加到包装器中，然后flex-direction: column确保将它们堆叠在一列（而不是一行）中。

然后，您可以将text-align上的b属性更改为所需的任何内容（left，center或right）。

p {
  display: flex;
  flex-direction: column;
  width: 600px;
  margin: auto;
}

img {
  width: 600px;
  height: 150px;
}

b {
  text-align: left;
}

<p align="center"><img src="http://via.placeholder.com/600x150">
  <b>text under it</b></p>

Answer 2

这是您想要的吗？查看下面的JSFiddle。

img {display: block;}

https://jsfiddle.net/ybq3d692/

Answer 3

这就是我要解决的问题：

#container {
  position: relative;
  display: block;
  width: 600px;
  margin: 0 auto;
}

#image {
  position: relative;
  display: block;
  width: 600px;
  height: 300px;
  background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#text {
  position: relative;
  display: block;
  font-size: 2em;
  color: red;
}

<div id="container">

<div id="image"></div>
   <div id="text">
   This is some text this is some text
   This is some text this is some text
   This is some text this is some text
</div>

https://jsfiddle.net/evkg2yz6/1/

Answer 4

将图像和文本放在与图像宽度相同的父div内，并提供任何文本对齐属性，即text-align：居中或左或右。

供参考... https://jsfiddle.net/e653vfdk/2/

CustomMarker

如何将图像居中并在其下方向左或向右放置文本？

4 个答案: