Question

我想把文字放在＆＃34; p＆＃34;进入我的＆＃34; div＆＃34;的中心。我的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;
}

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

如果您不希望下面的元素向上移动，您可以使用padding-bottom来防止这种情况发生。

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

的更多信息

连接＆＃34; div＆＃34;和＆＃34; p＆＃34;用CSS

2 个答案: