html - Div-container 在调整浏览器窗口大小时移动

Question

详细说明:

我有两个容器，它们都占据了最大浏览器窗口的 50%。他们肩并肩。在这些容器中还有另外两个容器，它们设计得像一个按钮。

像这样: Example

现在我的问题是，当我从左到右调整浏览器大小时，div 会移开，但我希望它们保持原样。

这是 Div1 和 div2 的一些代码:

<div id='picturediv1' class="image">
<div class="ghost">  
<a id="LK2" target="_blank" href="hehehe">Some link here</a>
</div>
</div>

这里是 Div3 和 Div4 的一些代码:

<div id='picturediv2' class="image2">
<div class="ghost2">
<a id="LK2" class="TFG2"  target="_blank" href="some link here" style="color:black;">Test2</a>
</div>
</div>

还有一些用于 div 2 和 4 的 CSS 代码。我只发布 div2 因为它们是最相同的。

div2 的 CSS:

      .ghost
            {
                /* position centered */
                display:inline-block;
                position: absolute;
                margin-top:20%;
                margin-left:50%;
                -webkit-transform: translateX(-50%) translateY(-50%);
                -ms-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                /* text styles */
                font-family: Tahoma, Verdana, Segoe, sans-serif;
                font-size: 13pt;
                letter-spacing: 0.3em;
                color:#ffffff;
                /* modify text */
                text-decoration:none;
                text-transform:uppercase;
                text-rendering:optimizeLegibility;
                /* add a border */
                border:0.15em solid #fff;
                padding:0.4em 0.6em;
                /* animate the change */
                -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 300ms, background 500ms, border-color 700ms;
                text-align: center;
                -moz-box-sizing: border-box;
                font-weight: 900;
                line-height: 60px;
                text-transform: uppercase;
                width:50%;
                text-align:center;  
            }

我添加了一些评论以便更好地理解我希望我对它的描述足够好。

Answer 1

您可以像这样使用 flexbox 来实现所需的输出。

您可以使用 flex-direction:(row/column) ，具体取决于您希望子元素如何对齐，如 div1 和 div2 上所示，以垂直对齐文本 Div1 和子分区 3.

.flex-container {
  display: flex;
  /*Generates a flexbox layout with default flex direction as row */
  width: 100%;
  /* Not really required */
  align-items: center;
  /*Aligns contents vertically */
  justify-content: center;
  /*Aligns contents horizontally */
  text-align: center;
  /*Aligns further text in the center */
}

#div1,
#div2 {
  border: 1px solid black;
  flex: 1;
  margin: 0 auto;
  height: 100px;
  display: flex;
  flex-direction:column;
  align-items: center;
  /*Aligns contents vertically */
  justify-content: center;
  /*Aligns contents horizontally */
  text-align: center;
  /*Aligns further text in the center */
}

#div3,
#div4 {
  border: 1px solid black;
  margin: 10px auto;
  padding: 20px;
  flex:1;
}

<div class="flex-container">
  <div id="div1">
    Div 1
    <div id="div3">Div 3</div>
  </div>
  <div id="div2">
    Div 2
    <div id="div4">Div 4</div>
  </div>
</div>