问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

浮动后多元素垂直居中的问题?

头像
Mr_兽
    176
    头像
    陟上晴明
      21.4k144991
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #wrapper {
        width: 400px;
        height: 400px;
        background: #000;
        margin: 0 auto;
        color: red;
      }
      /** 浮动布局*/
      .z-row::before,
      .z-row::after {
        display: table;
        content: " ";
      }
      .z-row::after {
        clear: both;
      }
      .z-row-left {
        float: left;
      }
      .z-row-right {
        float: right;
      }
    </style>
  </head>
  <body>
    <div id="wrapper" class="z-row">
      <span class="z-row-left">测试居中1</span>
      <div id="cell" class="z-row-left">
        <span>测试垂直居中效果</span><br />
        <span>测试垂直居中效果</span>
      </div>
      <span class="z-row-left">测试居中2</span>
    </div>
  </body>
</html>

      目前已经把 wrapper 中的所子元素都设置浮动了 在此基础上我想把子元素垂直居中，有什么好的解决办法吗 暂时不考虑 flex 以及 gird

      htmlhtml5css
      阅读 1.6k
      1 个回答
      得票最新
      头像
      玛拉_以琳
        8.7k41542
        <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    #wrapper {
      width: 400px;
      height: 400px;
      background: #000;
      margin: 0 auto;
      color: red;
    }

    /** 浮动布局*/
    .z-row::before,
    .z-row::after {
      display: table;
      content: " ";
    }

    .z-row::after {
      clear: both;
    }

    .z-row-left {
      float: left;
      margin-left: 50%;
      margin-top: 50%;
      transform: translate(-50%);
    }

    .z-row-right {
      float: right;
    }
  </style>
</head>

<body>
  <div id="wrapper" class="z-row">
    <span class="z-row-left">测试居中1</span>
  </div>
</body>

</html>

        image.png

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题