用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。有没有办法做到这一点？我尝试了一些方法，但似乎没有任何工作。

来源

2016-04-28 RadoInko

没有，就没有办法使用CSS重组HTML。您可以将文本居中放置在“p”标签中，但不能将“p”标签移动到“图片”div中。 – APAD1

这类事情对于jQuery来说是微不足道的，应该是可用的。 – isherwood

在不改变HTML的情况下做到这一点的唯一方法就是将div标签上方的p标签人为地对齐。

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

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

如果您不想让底下的元素向上移动，则可以使用填充底部来防止这种情况发生。

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

来源

2016-04-28 15:23:43 Goose

是的，这是有效的，但是这两者之下的所有其他元素也都移动了。 – RadoInko

@RadoInko我认为这将是预期的行为，如果p实际上也在div中，会发生什么。你可以使用'padding-bottom'来达到这个目的。我将编辑以反映这一点。 – Goose

非常感谢，很好的简单的解决方案。 – RadoInko

我假设你真的想使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

来源

2016-04-28 15:26:40 atmd

这看起来不错，它也没有搞乱其他元素。我会做一些测试，但看起来不错，谢谢！ – RadoInko

没问题，很高兴我能帮到 – atmd

为什么它不是最好的安娜？它的工作原理：D谢谢！ –

用CSS连接“div”和“p”

回答

相关问题