我正在尝试使用 flex box 进行布局,我已经尝试了所有组合,但我无法实现我想要的效果。
我希望整个“<div class="swpm-login-widget-logged">
”位于容器的中心,而不改变结构。
是否可以使用 flex-box 来实现。
.swpm-logged-username,
.swpm-logged-status,
.swpm-logged-membership,
.swpm-logged-expiry {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 15px;
margin-bottom: 5px;
}
.swpm-logged-username-label,
.swpm-logged-status-label,
.swpm-logged-membership-label,
.swpm-logged-expiry-label {
-webkit-flex-basis: 150px;
-ms-flex-preferred-size: 150px;
flex-basis: 150px
}
.swpm-logged-logout-link a {
display: inline-block;
padding: 5px 15px;
color: #fff;
background-color: #83a83d;
text-decoration: none;
border-radius: 3px;
margin-top: 15px;
}
<div class="swpm-login-widget-logged">
<div class="swpm-logged-username">
<div class="swpm-logged-username-label swpm-logged-label">Logged in as:</div>
<div class="swpm-logged-username-value swpm-logged-value">vikrant negi</div>
</div>
<div class="swpm-logged-status">
<div class="swpm-logged-status-label swpm-logged-label">Account Status:</div>
<div class="swpm-logged-status-value swpm-logged-value">Active</div>
</div>
<div class="swpm-logged-membership">
<div class="swpm-logged-membership-label swpm-logged-label">Membership:</div>
<div class="swpm-logged-membership-value swpm-logged-value">Paid Members</div>
</div>
<div class="swpm-logged-expiry">
<div class="swpm-logged-expiry-label swpm-logged-label">Account Expiry:</div>
<div class="swpm-logged-expiry-value swpm-logged-value">Never</div>
</div>
<div class="swpm-logged-logout-link">
<a href="?swpm-logout=true">Logout</a>
</div>
</div>
最佳答案
你可以添加到你的css中
.swpm-login-widget-logged {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
关于html - 如何使用 flex-box 将容器 div 中的整个 div 居中对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36355959/