XF 2.2 Как сдвинуть элементы виджета в центр

[Kildaaa]

вот сам виджет -

<xf:if is="{$xf.visitor.user_id}">
<div class="flexusersinfo">
<div class="flex-all-userinfo">
<xf:avatar user="{$xf.visitor}" class="sizeofinfo" size="m" canonical="true" />
<div class="flexusername">                       
<xf:username class="usernameinf" user="{$xf.visitor}" rich="true" />
<xf:usertitle class="usertitleinf" user="{$xf.visitor}" />
</div>
</div>

<div class="count-user-inform">
<span class="countlikes-taber"></span>
<xf:if is="{$xf.visitor.reaction_score}">
    <div class="icon-count">
     <p class="counters"><i class="icon-user-info far fa-heart"></i> {$xf.visitor.reaction_score}</p>   
    </div>
</xf:if>

<span class="countmessage-taber"></span>
<xf:if is="{$xf.visitor.message_count}">
    <div class="icon-count" text-align: center>
     <p class="counters"><i class="icon-user-info far fa-comment-alt"></i> {$xf.visitor.message_count}</p>
    </div>
    </xf:if>
</div>
</div>
<a class="mn-15-0-0 button primary block" href="account/upgrades">Платное повышение прав</a>
</xf:if>

 

[recruty]

Желаемый результат будет? Ну и демка, где можно увидеть вёрстку.

 

[Kildaaa]

Желаемый результат будет? Ну и демка, где можно увидеть вёрстку.

желаемый результат -
Кнопку такую же вывел, но она тоже не в центре находится

 

[Kildaaa]

демка -

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

(не реклама)

 

[recruty]

демка -

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

(не реклама)

Дайте тестового пользователя в ЛС.

 

[Skaiman]

<xf:css>
    .flexusersinfo {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .flexusersinfo .flex-all-userinfo {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .flexusersinfo .flex-all-userinfo .item-count {
        margin: 10px;
    }
    .flexusersinfo .button {
        margin-bottom: 10px;
    } 
}
</xf:css>

<xf:if is="{$xf.visitor.user_id}">
    <div class="flexusersinfo">
        <div class="flex-all-useravatar">
            <xf:avatar user="{$xf.visitor}" size="m" canonical="true" />
        </div>
        <div class="flex-all-username">
            <xf:username user="{$xf.visitor}" rich="true" />
         </div>
         <div class="flex-all-usertitle">
            <xf:usertitle user="{$xf.visitor}" />
        </div>
        <div class="flex-all-userinfo">
            <xf:if is="{$xf.visitor.reaction_score}">
                <div class="item-count">
                    <i class="far fa-heart"></i>
                    <span>{$xf.visitor.reaction_score}</span>
                </div>
            </xf:if>
            <xf:if is="{$xf.visitor.message_count}">
                <div class="item-count">
                    <i class="far fa-comment-alt"></i>
                    <span>{$xf.visitor.message_count}</span>
                </div>
            </xf:if>
        </div>
        <xf:button
            href="account/upgrades"
            class="button--primary">
            Платное повышение прав
        </xf:button>     
    </div>
</xf:if>

 

[Skaiman]

Немного исправил, если не понятно как добавит отдельные свойства, пишем здесь

 

[Kildaaa]

<xf:css>
    .flexusersinfo {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .flexusersinfo .flex-all-userinfo {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .flexusersinfo .flex-all-userinfo .item-count {
        margin: 10px;
    }
    .flexusersinfo .button {
        margin-bottom: 10px;
    }
}
</xf:css>

<xf:if is="{$xf.visitor.user_id}">
    <div class="flexusersinfo">
        <div class="flex-all-useravatar">
            <xf:avatar user="{$xf.visitor}" size="m" canonical="true" />
        </div>
        <div class="flex-all-username">
            <xf:username user="{$xf.visitor}" rich="true" />
         </div>
         <div class="flex-all-usertitle">
            <xf:usertitle user="{$xf.visitor}" />
        </div>
        <div class="flex-all-userinfo">
            <xf:if is="{$xf.visitor.reaction_score}">
                <div class="item-count">
                    <i class="far fa-heart"></i>
                    <span>{$xf.visitor.reaction_score}</span>
                </div>
            </xf:if>
            <xf:if is="{$xf.visitor.message_count}">
                <div class="item-count">
                    <i class="far fa-comment-alt"></i>
                    <span>{$xf.visitor.message_count}</span>
                </div>
            </xf:if>
        </div>
        <xf:button
            href="account/upgrades"
            class="button--primary">
            Платное повышение прав
        </xf:button>    
    </div>
</xf:if>

Спасибо большое, очень помогли, долго игрался с этим виджетом!