Question

我正在尝试将两个div水平居中，一个位于另一个之下。实际上我做了一些试验和错误，但我无法使其独立解决。除了1920 * 1080之外，其他分辨率看起来很奇怪。我尝试了percantage但我无法做到。我的div跳到了左上角。这是我的div在1920 * 1080中的样子：

我知道我不应该使用这个位置，宽度和高度像素，但如果没有它们我就无法得到这个视图。所以我为了清楚我的问题而做了这件事。

这是我的html代码：

    <body>
      <div name="video-div" id="videodiv" style="position:absolute; left:320px; top:10px;">
        <video id="videoPlayer" controls>
          <source src="" type="video/mp4">
        </video>
      </div>
      <div id="info-div" style="position:absolute; left:320px; top:740px;">
      </div>
      <div name="test2" id="div2">
        <ul id="ultimes">
          <li>test</li>
        </ul>
      </div>
      <div name='test' id="div1">
        <input id="datepicker" type="text" placeholder="Tarihi Seç">
        <form id="form">
          <button type="submit" id="listele">Listele</button>
        </form>
        <ul id="list1">
          <li>test</li>
        </ul>
        <ul id="ullogs">
          <li>test</li>
        </ul>
      </div>
    </body>

这是我的css代码：

    #info-div{
      background-color:white;
      border:1px solid black;
      height:200px;
      width:1280px;
    }

    #videodiv{
      width: 1280px;
      height: 720px;
      background-color: red;

      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      /*margin: auto;*/
    }

    #videoPlayer {
      object-fit: fill; /* it's not filling the div */
    }
    #div1 {
        padding-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
        width: 25vh;
        height: 100vh;
        background-color: #d5f4e6;
    }

    #div2 {
        float: right;
        padding-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
        width: 25vh;
        height: 100vh;
        background-color: #d5f4e6;
    }
    body{
      margin:0px;
      padding:0px;
      background-color: #80ced6 !important;
      overflow: hidden;
    }

    #form {
      margin-bottom: 40px;
    }

Answer 1

如果我说得对。你想要做的就是将两个div水平地放在另一个（视频和信息div）中，视频div填充100％宽度。

您是否尝试将它们包装在另一个div中并将其水平居中？这样做并给wrapper-div一个宽度应该有效。

 .wrapper-div {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1280px
    }
.video-div {
      width: 100%;
}

<div class="wrapper-div">
  <div name="video-div" id="videodiv">
    <video id="videoPlayer" controls>
          <source src="" type="video/mp4">
        </video>
  </div>
  <div id="info-div">
  </div>
</div>

居中水平2分|其中一个

1 个答案: