首页DW将文字在图片下并将图片对齐横排css代码

DW将文字在图片下并将图片对齐横排css代码

时间: 2024-11-27 12:08:38 浏览: 48

在CSS中，如果你想要创建一个效果，使得文本垂直居中，并且图片水平排列在文本下方，可以使用Flexbox布局结合`::before`伪元素来实现。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; align-items: center; /* 文本垂直居中 */ justify-content: flex-start; /* 图片左对齐 */ } .text-and-img { position: relative; } .text-and-img::before { content: attr(data-text); /* 获取data-text属性的文字内容 */ font-size: 24px; /* 根据需要调整字体大小 */ position: absolute; bottom: 0; left: 0; width: 100%; padding-bottom: calc(50% + 20px); /* 计算图片高度的一半加一些间距 */ background-image: url('your-image-url.jpg'); /* 替换为你实际的图片URL */ background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="container" data-text="这是你的文字"> <img src="your-image-url.jpg" alt="图片描述">  </div> </body> </html> ``` 在这个例子中，`.container`包含`.text-and-img`，`::before`伪元素会插入到`.text-and-img`内部并显示文字。图片则放在元素的末尾，通过设置`background-position`使其位于文字下方。

阅读全文