使用 CSS 连接"div"和"p"

Question

我想把"p"中的文本放在我的"div"的中心。我的 html 是这样的：

<div class="picture">  
   <img src="/sites/default/files/default_images/colorful-triangles-background_yB0qTG6.jpg" width="1080" height="1920" alt="background to view" typeof="foaf:Image">
</div>
<p class="textik"">Hello handsome.</p>

但是我无法更改 html 标签。我只能我们CSS。有没有办法做到这一点？我尝试了一些方法，但似乎都没有奏效。

Answer 1

在不更改 HTML 的情况下执行此操作的唯一方法是像这样人为地将 p 标签对齐在div 标签上方。

p.textik {
    margin-top: -5px;
}

根据需要进行调整，并针对移动设备进行测试。

如果您不希望下面的元素也向上移动，则可以使用底部填充来防止这种情况。

p.textik {
    padding-bottom: 5px;
}

Answer 2

我假设您实际上想使p标签出现在图像的中心，以便您可以将其定位absolute并使用css转换其位置。通过使用absolute定位和转换位置，如果图像/外部元素的大小发生变化，则无需重新定位。像这样：

<div class='someOuterElement'>
  <div class="picture">  
     <img src="http://placehold.it/500/500" width="500" height="500" >
  </div>
  <p class='textik'>Hello handsome.</p>
</div>

并用以下方式设置样式：

.someOuterElement {
  position: relative;
  width: 500px
}
.textik {
  text-align; center;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

这里有更多关于 css 转换的信息