垂直居中元素到它的兄弟姐妹高度

Question

我试图将 .container img:nth-child(2) 垂直居中到其兄弟姐妹的高度，但它不起作用。我试图用很多命令将它垂直居中（并将它添加到两者 - .container 和 .child）但没有任何反应。此外，当 window 缩小时，我希望第一个 .container img 子级居中并位于第二个子级之上。整个容器也应该水平对齐到浏览器 windows 宽度的中心（附截图）。

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

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>

Answer 1

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

将每个锚 link 设为 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>

Answer 2

让你拥有display:flex； justify-content：中心； flex-direction：行并设置为 flex: 0 1 auto; align-self：居中；

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>

垂直居中元素到它的兄弟姐妹高度

Vertically centering element to it's siblings height

css

positioning

centering

flexbox