垂直居中元素到它的兄弟高度答案

【问题标题】：Vertically centering element to it's siblings height垂直居中元素到它的兄弟高度
【发布时间】：2017-06-28 01:40:36
【问题描述】：

我试图将.container img:nth-child(2) 垂直居中到其兄弟的高度，但它不起作用。我尝试使用许多命令将其垂直居中（并将其添加到 - .container 和 .child 中），但什么也没发生。此外，当窗口缩小时，我希望第一个 .container img 孩子居中并高于第二个孩子。整个容器也应该水平对齐到浏览器窗口宽度的中心（附截图）。

是否可以不使用媒体查询？你们能帮帮我吗？我是一个初学者，我真的很想弄清楚这些显示器和定位......

body {
  margin: 0;
}
.parent {
  background-image:url("http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
  background-size: cover;
  flex-wrap: wrap;
  height: 100vh;
  position: relative;
}
.parent h1 {
  margin-top:0;
  padding-top: 2em;
  text-align: center;
  font-family: helvetica;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: absolute;
  bottom: 2em;
  width: 100%;
}

.child {
  display: inline-flex;
  padding: 0 5px;
}

.container img {
  float: left;
}

.container a {
  opacity: 0.5;
}

.container a:hover {
  opacity: 1;
}

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>random title</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="parent">
  <h1>Heading example</h1>
  <div class="container">
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
</div>
  
  
</body>
</html>

【问题讨论】：

您是否有理由避免媒体查询？

标签： css flexbox positioning centering

【解决方案1】：

您可以将嵌套的 flexbox 与媒体查询一起使用。

将每个锚链接设为 flexbox。

.container a {
  display: flex;
  align-items: center;
  justify-content: center;
}

在媒体查询中切换flex-direction 值。

@media (max-width: 768px) {
  .container a {
    flex-direction: column;
  }
}

body {
  margin: 0;
}
.parent {
  background-image: url("http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
  background-size: cover;
  flex-wrap: wrap;
  height: 100vh;
  position: relative;
}
.parent h1 {
  margin-top: 0;
  padding-top: 2em;
  text-align: center;
  font-family: helvetica;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* align-content: center; */
  position: absolute;
  bottom: 2em;
  width: 100%;
}
.child {
  padding: 0 5px;
}
.container img {
  /* float: left; */
}
.container a {
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container a:hover {
  opacity: 1;
}
@media (max-width: 768px) {
  .container a {
    flex-direction: column;
  }
}

<div class="parent">
  <h1>Heading example</h1>
  <div class="container">
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
  </div>

【讨论】：

【解决方案2】：

让你有 display:flex;证明内容：中心；弹性方向：行并有 be flex: 0 1 auto;对齐自我：居中；

body {
  margin: 0;
}
.parent {
  background-image:url("http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
  background-size: cover;
  flex-wrap: wrap;
  height: 100vh;
  position: relative;
}
.parent h1 {
  margin-top:0;
  padding-top: 2em;
  text-align: center;
  font-family: helvetica;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: absolute;
  bottom: 2em;
  width: 100%;
}

.child {
  display: inline-flex;
  padding: 0 5px;
}

.child>a{
  display:flex;
  flex-direction: row;
  justify-content:center;
}

.child>a>img{
  flex:0 1 auto;
  align-self:center
}

.container img {
  float: left;
}

.container a {
  opacity: 0.5;
}

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>random title</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="parent">
  <h1>Heading example</h1>
  <div class="container">
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
    <div class="child">
      <a href="_top">
        <img src="http://placehold.it/90x90" alt="ux-button">
        <img src="http://placehold.it/150x40" alt="ux-button">
      </a>
    </div>
</div>
  
  
</body>
</html>

【讨论】：