Question

我有两个div，但它们位于顶部，我希望它们位于中间，每个都有一个背景颜色，我想填充它们的一半屏幕。

.contenedor {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 50px;
}

.español {
  background: red;
}

.english {
  background: blue;
}

a {
  text-decoration: none;
}

<div class="contenedor">
  <div class="español">
    <a href="/es">Español</a>
  </div>
  <div class="english">
    <a href="/en">English</a>
  </div>
</div>

我该怎么做呢？

A picture says more than a thousand words

谢谢！

Answer 1

要添加到您的代码中需要做很多工作。如果要使用flex（就像对容器所做的那样），请对元素使用以下设置：

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}

.contenedor {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 50px;
  height: 100%;
}

.contenedor>div {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.español {
  background: red;
}

.english {
  background: blue;
}

a {
  text-decoration: none;
  color: white;
}

＆＃13;

<div class="contenedor">
  <div class="español">
    <a href="/es">Español</a>
  </div>
  <div class="english">
    <a href="/en">English</a>
  </div>
</div>

＆＃13;

Answer 2

您可以选择多种方法。

一个简单的方法是设置2个具有绝对定位的div，每个宽度为50％。

这样每个div都会占据页面的整个高度，你不必担心身体边缘或填充。

＆＃13;

.contenedor {
  font-size: 50px;
}

.espanol,
.english {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.espanol {
  background: red;
  left: 0;
}

.english {
  background: blue;
  left: 50%;
}

.contenedor a {
  color: #fff;
  text-align: center;
  text-decoration: none;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

＆＃13;

<body>
  <div class="contenedor">
    <div class="espanol">
      <a href="/es">Español</a>
    </div>
    <div class="english">
      <a href="/en">English</a>
    </div>
  </div>

＆＃13;

如何让两个div垂直居中并使其背景填充浏览器

2 个答案: