AmenomoriYuuna
有两个div在header这个div里，header是100%宽度，小div1我希望它靠左以便用于网页的标题，而小div2我希望它相对于整个header是居中的

但由于div1的存在好像让div2总是偏右，该如何让div2在正中央呢
Lidocaine
参考下述代码
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Test</title>
  6.     <style>
  7.         body{
  8.             text-align: center;
  9.         }
  10.         header {
  11.             width: 100%;
  12.             background-color: yellow;
  13.         }

  15.         .div1 {
  16.             background-color: green;
  17.             width: 80px;
  18.             float: left;
  19.             /*  把div1固定在左侧  */
  20.         }

  22.         .div2 {
  23.             width: 80px;
  24.             background-color: red;
  25.             margin: auto;
  26.             /*  把div2居中显示 */
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31. <header>
  32.     <div class="div1">测试Div</div>
  33.     <div class="div2">测试Div</div>
  34. </header>
  35. </body>
  36. </html>
复制代码
0o酱
本帖最后由 0ojixueseno0 于 2022-3-28 08:35 编辑



  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=100%, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0 auto;
  12.             color: white;
  13.         }
  14.         .header {
  15.             width: 100%;
  16.             height: 100px;
  17.         }
  18.         .div1 {
  19.             width: 500px;
  20.             position: absolute;
  21.             top: 0;
  22.             left: 0;
  23.             background-color: blueviolet;
  24.         }
  25.         .div2 {
  26.             width: 500px;
  27.             background-color: red;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="header">
  33.         <div class="div1">这是Div1的内容</div>
  34.         <div class="div2">这是Div2的内容</div>
  35.     </div>
  36. </body>
  37. </html>
复制代码


mcbbs里问前端问题真的没问题吗hhhhhh
Craftwolves
设置header为相对定位,div2为绝对定位,然后将div2居中
AmenomoriYuuna
Craftwolves 发表于 2022-3-28 10:17
设置header为相对定位,div2为绝对定位,然后将div2居中

虽然参考了其他方法【新增了一个div和div1一样宽然后放在右边了】
非常感谢