文本对齐:居中和边距:0自动不适用于绝对定位的元素
Text-align:center and margin:0 auto not working on absolute positioned elements
我正在尝试在中心对齐div,但文本对齐:中心和边距:0自动似乎都不适用于绝对定位的元素。我假设两者都不适用于绝对定位的元素。在这种情况下,我应该怎么做?
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
height: 250px;
margin: 0 auto;
text-align: center;
}
#absolute {
border: 1px solid red;
position: absolute;
display: block;
bottom: 0;
margin: 0 auto;
cursor: pointer;
}
<div id='wrap'>
<div id='absolute'>Click Me</div>
</div>
在不更改 HTML 的情况下,将元素水平居中的最简单方法是将 left: 50%
和 transform: translateX(-50%)
组合在一起。这实质上是将元素50%
定位在右侧,然后通过将其向左变换-50%
来替换元素宽度的一半。这样,无论宽度如何,元素都将水平居中,这意味着您无需对任何值进行硬编码。
position: absolute;
left: 50%;
transform: translateX(-50%);
更新的代码段:
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
margin: 0 auto;
height: 80px;
}
#absolute {
border: 1px solid red;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: 0;
cursor: pointer;
}
<div id="wrap">
<div id="absolute">Click Me</div>
</div>
或者,如果可以更改 HTML,只需将left: 0
和right: 0
添加到绝对定位的元素元素,以便它采用父容器的宽度。然后,您可以添加text-align: center
以使子元素居中:
更新的代码段:
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
margin: 0 auto;
height: 80px;
}
#absolute {
position: absolute;
left: 0; right: 0;
bottom: 0;
text-align: center;
}
#absolute > span {
border: 1px solid red;
cursor: pointer;
}
<div id="wrap">
<div id="absolute">
<span>Click Me</span>
</div>
</div>
由于您知道包装器的大小,因此您只需将left: 250px
(包装器大小的一半)添加到绝对定位元素的 css 中即可。
相关文章:
- HTML5 Canvas toDataURL(“image/png”)适用于一些绘画,而有些则不然,不确定原因
- JavaScript不显示剩余字符,但适用于其他页面
- 我如何完善这个Javascript代码,使其只适用于来自图像的链接(而不是来自文本的链接)
- 为什么这只适用于身体部分而不是头部
- 为什么不't此正则表达式适用于重复出现的对
- document.getElementById 对内部 html 的调用适用于 $_POST 和 $_GET 变量,但不
- JavaScript 位置适用于本地主机而不是服务器
- Rally App SDK 2.0:Rallymultiobjectpicker,适用于不显示displayField的
- jQuery事件在Mozilla上不起作用,并且适用于其他浏览器
- Angular.js - 控制器不为索引执行,适用于其余模板
- D3 .on 更改适用于文本而不是图表
- Zillow 数据 - json_encode不起作用 - 适用于常规变量
- 弹出模式仅适用于表格中的第一个元素,第二次单击后不会再次打开
- Phonegap Android项目适用于模拟器,而不是实际的手机
- ajax jonp 不应该适用于 请求的上不存在“访问控制-允许源”标头
- AngularJS:ng-单击不起作用,适用于<按钮>
- Javascript不会在移动设备上加载.适用于桌面
- 为什么我的代码适用于高度:100px,而不是高度:100%
- 拖放区.js + Laravel-多文件上传不起作用(仅适用于一个文件)
- 哪些限制适用于不透明响应