用CSS连接“div”和“p”
问题描述:
我想将“p”中的文本放到我的“div”的中心。我的html是这样的:用CSS连接“div”和“p”
<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。有没有办法做到这一点?我尝试了一些方法,但似乎没有任何工作。
答
在不改变HTML的情况下做到这一点的唯一方法就是将div标签上方的p标签人为地对齐。
p.textik {
margin-top: -5px;
}
根据需要调整并测试移动设备。
如果您不想让底下的元素向上移动,则可以使用填充底部来防止这种情况发生。
p.textik {
padding-bottom: 5px;
}
答
我假设你真的想使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的更多信息变换here
没有,就没有办法使用CSS重组HTML。您可以将文本居中放置在“p”标签中,但不能将“p”标签移动到“图片”div中。 – APAD1
这类事情对于jQuery来说是微不足道的,应该是可用的。 – isherwood