Как центрировать выравнивание целого div внутри контейнера div с помощью гибкой коробки?

Я пытаюсь сделать макет с помощью flex box, и я пробовал каждую комбинацию, но я не могу добиться того, что хочу. Я хочу, чтобы весь этот «<div class="swpm-login-widget-logged">» был в центре контейнера без каких-либо изменений в structrure. Это можно достичь с помощью гибкой коробки.Как центрировать выравнивание целого div внутри контейнера div с помощью гибкой коробки?

Текущая структура:

Требуемая структура:

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

источник

2016-04-01 vikrantnegi007

Могу ли я изменить ваш html-код? или вы хотите только в этом коде? –

Вы можете добавить любые другие div или span, но не удалять текущие. – vikrantnegi007

вы можете добавить в свой CSS

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

источник

2016-04-01 12:29:49

можете ли вы добавить фрагмент кода или js fidddle для ответа. Я пробовал, но не работал, это испортило структуру. – vikrantnegi007

здесь вы идете, вам также нужно добавить ширину для горизонтальных элементов, и я ошибся, вам нужно использовать flex-direction: column, jsfindle: https://jsfiddle.net/3f7ttac2/ –

Практически, но я должен добавить ширину к дочерние divs и если длина текста внутри него становится больше, текст будет просто обернут. Кроме того, я должен сделать ширину достаточно большой, чтобы выравнивать ее по центру, если я увеличиваю ширину, в которой дочерний div не центрируется в центре. – vikrantnegi007

Try This

.swpm-login-widget-logged { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    align-items: center; 
 
    } 
 
\t .swpm-login-widget-inner { 
 
\t \t width: auto; 
 
\t } 
 
\t \t 
 
    .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"> 
 
\t \t \t <div class=".swpm-login-widget-inner"> 
 
\t \t \t <div class="swpm-logged-username"> 
 
\t \t \t \t <div class="swpm-logged-username-label swpm-logged-label">Logged in as:</div> 
 
\t \t \t \t <div class="swpm-logged-username-value swpm-logged-value">vikrant negi</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="swpm-logged-status"> 
 
\t \t \t \t <div class="swpm-logged-status-label swpm-logged-label">Account Status:</div> 
 
\t \t \t \t <div class="swpm-logged-status-value swpm-logged-value">Active</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="swpm-logged-membership"> 
 
\t \t \t \t <div class="swpm-logged-membership-label swpm-logged-label">Membership:</div> 
 
\t \t \t \t <div class="swpm-logged-membership-value swpm-logged-value">Paid Members</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="swpm-logged-expiry"> 
 
\t \t \t \t <div class="swpm-logged-expiry-label swpm-logged-label">Account Expiry:</div> 
 
\t \t \t \t <div class="swpm-logged-expiry-value swpm-logged-value">Never</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="swpm-logged-logout-link"> 
 
\t \t \t \t <a href="?swpm-logout=true">Logout</a> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

источник

2016-04-01 13:00:01 SCRATK

В любом случае, я могу добавить равный интервал справа от левых элементов. Если я добавлю margin-right, я должен добавить разные поля для каждого элемента, чтобы они могли одинаково выравниваться слева. – vikrantnegi007

Я добавил

{ 
    margin:auto; 
    width: 255px; 
    }

в .swpm-Логин-виджет протоколированием

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

источник

2016-04-01 13:29:40

Как центрировать выравнивание целого div внутри контейнера div с помощью гибкой коробки?

ответ

Смежные вопросы