我很难在垂直对齐位置设置 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>如您所见，评级和名称应该在同一行。如果有任何帮助，我将不胜感激。
最佳答案
一个简单的解决方案是为 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>希望这对您有所帮助。最好的问候。
关于css - 无法使用 css flexbox 设置元素样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59719008/