我需要在底部对齐这 4 个 Vuetify div 的中心。
为了绝对清楚,这是一个带有红线的屏幕截图,我也想对齐所有内容。 Screen shot with red line
<v-container grid-list-lg>
<v-layout>
<v-flex mb-5>
<!--<v-flex xs12 text-xs-center mb-5 v-if="selected_marketplaces != ''">-->
<div xs2 pt-3 px-5 class="complete_progress_dots"></div>
<div xs2 class="horizontal_dotted_line"></div>
<div xs2 pt-3 px-5 class="not_complete_progress_dots"></div>
<v-btn offset-xs2 outline large fab class="dark_green_icon" >
<v-icon size="60px">chevron_right</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-container>
这是它们的 css:
.horizontal_dotted_line {
border:none;
border-top: 1px dotted #3b9542;
color:#fff;
background-color: #3b9542;
height:1px;
width:150px;
display: inline-block;
}
.not_complete_progress_dots {
height: 25px;
width: 25px;
border: 2px solid #3b9542;
border-radius: 50%;
display: inline-block;
margin-right: 50px !important;
margin-left: 50px !important;
}
.complete_progress_dots {
height: 25px;
width: 25px;
background-color: #3b9542;
border-radius: 50%;
display: inline-block;
margin-right: 50px !important;
margin-left: 50px !important;
}
.dark_green_icon {
color: #3b9542 !important;
}
我哪里错了?
最佳答案
使用vertical-align: middle;
。它有效。
关于html - Vuetify - 对齐 div、行和按钮的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49563545/