Question

我试图将.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>

Answer 1

您可以将嵌套的flexbox用于媒体查询。

将每个锚链接设为弹性框。

com.example.Journal

在媒体查询中切换.container a { display: flex; align-items: center; justify-content: center; }值。

flex-direction

＆＃13;

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

＆＃13;

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;
  }
}

＆＃13;

Answer 2

让你的显示：flex;证明内容：中心;弯曲方向：排并且有弹性：0 1自动; align-self：center;

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

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

2 个答案: