html - 如何将元素居中并将元素定位到任一侧-6ren

html - 如何将元素居中并将元素定位到任一侧

转载作者：行者123 更新时间：2023-12-05 06:11:54

<分区>

我想水平居中一个元素并将元素定位到它的任一侧(但不让它们成为居中计算的一部分)。我更喜欢直接的 CSS 解决方案；除非 super 轻量级，否则最好不要编写脚本。

这是我目前为止最接近的结果: 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;
}

文章推荐： java - 配置Swagger-ui路径

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何将元素居中并将元素定位到任一侧