html - 如何将元素居中并将元素定位到任一侧
问题描述
我想将一个元素水平居中并将元素定位到它的任一侧(但不让它们成为居中计算的一部分)。我更喜欢直接的 CSS 解决方案;除非超轻量级,否则最好不要编写脚本。
这与我到目前为止所获得的一样接近: https ://jsfiddle.net/stupid_genius/5c0xnqmb/5/
“Left”和“Right”元素应该接触居中的“X”元素的左右两侧而不改变它的位置。有没有办法做到这一点?
所需结果的模拟:https ://jsfiddle.net/stupid_genius/5c0xnqmb/3/
html, body {
margin: 0;
padding: 0;
}
#main {
position: absolute;
width: 100%;
height: 100%;
background: lightblue;
}
#centered {
position: relative;
margin: 0 auto;
width: 500px;
background: yellow;
}
#center {
margin: 0 auto;
width: 100px;
text-align: center;
background: gray;
}
#left,
#right {
position: absolute;
top: 0;
}
#left {
/* right: calc(50% + 50px); */
left: 0;
width: 50px;
background-color: green;
}
#right {
/* left: calc(50% + 50px); */
right: 0;
width: 200px;
background-color: red;
}
解决方案
HTML:
<div id="main">
<div id="centered">
<div id="left">Left</div>
<div id="center"><---X---></div>
<div id="right">Right</div>
</div>
</div>
CSS
html, body{
margin: 0;
padding: 0;
}
#centered{
display: flex;
}
#left{
background: green;
flex-grow: 1;
}
#center{
margin: 0 auto;
background: yellow;
}
#right{
background: pink;
flex-grow: 1;
}
请参阅此JSFiddle。
这是你要求的吗?
推荐阅读
- go - 使用上下文停止执行简单函数
- wordpress - 如何在 Woocommerce REST API 中按元筛选产品?
- laravel-backpack - 将文件上传到 Laravel-Backpack/Settings?
- apache-nifi - 自定义属性中的 Nifi 敏感信息
- hololens - 将多个应用程序部署到 hololens 2
- python - 未找到 OpenSuse 11 版本“GLIBC_2.14”
- python - 刽子手替换字符逻辑
- ffmpeg - 从 DV AVI 中提取帧时间码
- php - 如何在两个函数中获取相同的 URL 参数?
- java - 实现者迭代器