如何使用flex-box将整个div对齐在容器div中？

Question

我试图使用弹性框进行布局，我尝试了所有组合，但我无法达到我想要的效果。 我想要这整个＆＃34; <div class="swpm-login-widget-logged">＆＃34;在容器的中心，没有结构的任何变化。 是否可以使用flex-box实现。

目前的结构：

所需结构：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以添加到你的CSS

.swpm-login-widget-logged {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

Answer 2

试试这个

.swpm-login-widget-logged {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    }
	.swpm-login-widget-inner {
		width: auto;
	}
		
    .swpm-logged-username,
    .swpm-logged-status,
    .swpm-logged-membership,
    .swpm-logged-expiry {
      display: -webkit-box;
      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-login-widget-inner">
			  <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>
		</div>

Answer 3

我添加了

{
    margin:auto;
    width: 255px;
  }

到 .swpm-login-widget-logged

.swpm-login-widget-logged{
    margin:auto;
    width: 255px;
  }


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