css图片高度不设置怎么让中间文字居中
我想做一个响应式网站。一行放5个图片。每个图片占25%。所以我li的宽度弄的25%.高度没有设置。现在我想给图片中间再放一个div让他上下左右居中。但是我只能左右居中。没...
我想做一个响应式网站。一行放5个图片。每个图片占25%。所以我li的宽度弄的25%.高度没有设置。 现在我想给图片中间再放一个div 让他上下左右居中。但是我只能左右居中。没有高度不能上下居中啊。
作品1号和背景不能上下居中。
这是代码 展开
作品1号和背景不能上下居中。
这是代码 展开
展开全部
可以用绝对定位。每个图片所属元素用relative。文字这里的标签设置个高度吧，如height:40px;line-height:40px;，然后给个absolute，top:50%;margin-top:-20px就行了。大体思路给你了，具体情况你自己来修改。
7n7z资源网为您解答
7n7z资源网为您解答
更多追问追答
追问
top:50% 不行，因为没有高度。之前这样设置了。他变成针对整个屏幕50%；而不是图片的50%；
追答
不是给图片设置relative，是给每个包含图片和标题的标签，也就是父元素。思路就是父元素为定位参考，子元素标签相对这个父元素来绝对定位。我写个测试代码给你看下吧。
<html>
<head>
<title>test</title>
</head>
<body>
<div><img src="http://www.7n7z.com/d/file/news/zz/pl/2015-11-03/dd4a274090fb08eb1f8b61f8b5b33ce4.jpg"><p>test</p></div>
<div><img src="http://www.7n7z.com/d/file/life/yl/mx/2015-11-06/1446775448952949.jpg"><p>test</p></div>
<div><img src="http://www.7n7z.com/d/file/read/mw/xq/2015-08-31/e105777ed780641ce1a5e06782535e31.jpg"><p>test</p></div>
<style>
div{float:left;position: relative; overflow: hidden; width: 200px;}
div p{position: absolute; top:50% ; height: 40px; line-height: 40px; width:100%; overflow: hidden; margin-top: -20px; margin-left: auto;margin-right: auto; text-align: center; background: #000; opacity: 0.6;color:#fff;}
</style>
</body>
</html>
效果图
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
