在另一个div的中间定位div
在另一个div的中间定位div
提问于 2014-11-13 22:08:27
我想定位在下面的加号，在中间的圆圈。现在我试着使用顶部和左边的属性。只对一个设备起作用。当我在智能手机上查看页面时，所有内容都丢失了。所以我需要一个没有使用顶部和左边的方法位置，这样移动圆圈不会影响加号(它将保持在中间)。
我的代码：
<html>
<body>
<div id="button"><div id="plus">+</div></div>
</body>
<style>
#button
{
position : relative;
width : 100px;
height : 100px;
border-radius : 100%;
background-color : red;
}
#plus
{
display : inline-block;
position : absolute;
width : 50%;
height : 50%;
margin : auto;
left : 5px;
font-family : sans-serif;
font-size : 40px;
color : black;
vertical-align : middle;
text-alignment : center;
}
</style>
回答 7
Stack Overflow用户
回答已采纳
发布于 2014-11-13 23:00:08
这把小提琴包含一个版本，在更新字体大小时保持中心位置。然而，它确实依赖于CSS3 3的translate-y。如果支持较旧的浏览器是一个问题，请检查这一资源以查看它在哪些浏览器中得到支持。然而，根据我的评论，由于字体的变化，它不一定是完美的。
Stack Overflow用户
发布于 2014-11-13 22:20:38
你所需要的就是在加号上占25%。
<html>
<body>
<div id="button">
<div id="plus">+</div>
</div>
</body>
<style>
#button {
position: absolute;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: red;
}
#plus {
display: block;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
font-family: sans-serif;
font-size: 40px;
color: black;
vertical-align: middle;
text-align: center;
}
</style>
</html>
Stack Overflow用户
发布于 2014-11-13 22:24:36
另一个选项是向父div添加display:table-cell。这个问题用这真是个问题。很好地解决了。
以下是我最后得到的结果：http://jsfiddle.net/117ew9Lf/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26919379
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号