账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    子元素随着兄弟元素自适应垂直居中
    41
    0

    父元素有两个子元素，两个子元素需要并排显示，右侧的子元素内容不固定，需要让左侧的元素随右侧子元素的变化而自适应垂直居中父元素

    
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    #demo {
        width: 410px;
        border: 1px solid red;
    }

    .sample-1 {
        display: inline-block;
        width: 200px;
        border: 1px solid black;
    }

    .sample-2 {
        width: 200px;
        display: inline-block;
        border: 1px solid orange;
    }
    </style>
</head>

<body>
    <div id="demo">
        <div class="sample-1">
            我是一行文字需要自适应垂直居中
        </div>
        <div class="sample-2">
            在移动端如果使用body滚动，意思就是页面的高度由内容自动撑大，body自然形成滚动条，这时我们监听window.onscroll，发现onscroll并没有实时触发，只在手指触摸的屏幕上一直滑动时和滚动停止的那一刻才触发,采用了wk内核的webview除外。
        </div>
    </div>
</body>

</html>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 妳°幼稚鬼 普通会员 1楼

      在CSS中，子元素的垂直居中可以通过使用Flexbox或者Grid布局来实现。以下是一个使用Flexbox的示例：

      HTML代码：

      ```html

      子元素
      兄弟元素

      ```

      CSS代码：

      ```css .container { display: flex; justify-content: center; align-items: center; }

      .child { width: 100px; height: 100px; background-color: red; }

      .brother { width: 50px; height: 50px; background-color: blue; } ```

      在这个示例中，.container的display属性设置为flex，这使得子元素和兄弟元素能够占据容器的中心位置。justify-content和align-items属性分别设置为center，这使得子元素和兄弟元素垂直和水平居中。child和brother的width和height属性设置为相同的值，这使得兄弟元素能够占据与子元素相同的宽度和高度。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部