Question

我很难为div中的元素设置垂直对齐的样式。
这是代码段。我对CSS flexbox很陌生。

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container {
  margin: auto;
  width: 50%;
  padding: 10px;
  font-family: Lato, sans-serif;
}

#frameworks-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid orangered;
  background-color: white;
  color: black;
  border-radius: 25px;
  font-weight: 800;
  line-height: 1.2;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  width: 400px;
  height: auto;
}

.framework_rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: orangered;
  border-radius: 50%;
  text-align: center;
}

<div id="container">
  <div id="frameworks-wrapper">
    <h3>Favorites Web Frameworks ratings</h3>
    <div><span class="framework_rating">3</span>React</div>
    <div><span class="framework_rating">6</span>Blazor</div>
    <div><span class="framework_rating">2</span>Knockout.js</div>
  </div>
</div>

如您所见，评级和名称应该在同一行。我将不胜感激。

Answer 1

您只需要在包装器内的div上添加css：

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
 
#container{
  margin: auto;
  width: 50%;
  padding: 10px;
  font-family: Lato, sans-serif;
}


#frameworks-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid orangered; 
  background-color: white; 
  color: black;
  border-radius: 25px; 
  font-weight: 800; line-height: 1.2;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  width:400px;
  height:auto;
}

#frameworks-wrapper>div{
  width: 100px;
  display: flex;
  justify-content: space-between;
}

.framework_rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: orangered;
    border-radius: 50%;
    text-align: center;
}

<body>
   <div id="container">
      <div id="frameworks-wrapper">
          <h3>Favorites Web Frameworks ratings</h3> 
          <div><span class="framework_rating" >3</span>React</div>
          <div><span class="framework_rating" >6</span>Blazor</div>
          <div><span class="framework_rating" >2</span>Knockout.js</div>
      </div>
   </div>
</body>

Answer 2

一种简单的解决方案是将div的类放在同一行中包装所需的元素：

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
 
#container{
  margin: auto;
  width: 50%;
  padding: 10px;
  font-family: Lato, sans-serif;
}


#frameworks-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid orangered; 
  background-color: white; 
  color: black;
  border-radius: 25px; 
  font-weight: 800; line-height: 1.2;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  width:400px;
  height:auto;
}
.framework_rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: orangered;
    border-radius: 50%;
    text-align: center;
}

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 25%;
}

<body>
   <div id="container">
      <div id="frameworks-wrapper">
          <h3>Favorites Web Frameworks ratings</h3> 
          <div class="wrapper"><span class="framework_rating" >3</span>React</div>
          <div class="wrapper"><span class="framework_rating" >6</span>Blazor</div>
          <div class="wrapper"><span class="framework_rating" >2</span>Knockout.js</div>
      </div>
   </div>
</body>

希望这会有所帮助。最好的问候。

Answer 3

您需要在frameworks-wrapper ID的div上添加此CSS。您可以在此处使用flexbox，它可以为您提供弹性布局

#frameworks-wrapper>div{
  display: flex;
}

有关更多参考，请检查此flexbox guide

无法使用CSS Flexbox设置元素样式

3 个答案: