Как выровнять элементы по центру блока?

Question

[OstapO]

Нужно выровнять элементы по центру блока и чтобы элементы были равны по линии (см. Скрин).

Как это сделать? Ну и конечно, чтобы это было адаптивно.

<div class="d-flex align-items-center flex-column flex-md-row certificates__group">
    <ul class="list-unstyled pl-0 mb-0 certificates__group__item">
        <li>
            <a class="d-flex align-items-center" target="_blank" href="http://www.digitroncorp.com/SiteMedia/CommonResources/pdfs/Digitron-AS9100-Rev-D-certificate-20190316.pdf">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                    <path fill="#BF232A" fill-rule="evenodd" d="M14.68 13.434a10.816 10.816 0 0 0-2.502.193c1.049.389 1.983.57 2.657.653l.07.004c.266 0 .299-.24.3-.342.003-.081-.015-.487-.524-.508m-6.546.615c.44-.24.887-.454 1.34-.643a13.22 13.22 0 0 1-1.286-.917c.01.535-.008 1.056-.054 1.56m-3.239 3.875c-.132.162-.17.303-.116.417.122.257.595.316.83-.005a7.692 7.692 0 0 0 1.079-2.137c-.955.75-1.545 1.42-1.793 1.725M6.122 7.429c-.106 0-.27.087-.36.25-.092.163-.08.342.035.53.336.554.7 1.075 1.093 1.562a14.57 14.57 0 0 0-.585-2.152c-.07-.19-.152-.19-.183-.19M13 7V1l6 6h-6zm1.713 8.271a12.94 12.94 0 0 1-4.096-1.229 13.03 13.03 0 0 0-2.664 1.271c-.277 1.378-.792 2.593-1.535 3.613a1.516 1.516 0 0 1-1.226.644c-.559 0-1.087-.322-1.315-.799-.225-.472-.136-1.01.243-1.478.347-.428 1.312-1.514 2.926-2.586.156-.978.187-2.041.092-3.162a14.985 14.985 0 0 1-2.196-2.816c-.303-.499-.322-1.061-.051-1.542.259-.459.742-.758 1.231-.758.506 0 .926.315 1.121.842.15.409.646 1.862.855 3.812.79.745 1.665 1.376 2.607 1.88a11.999 11.999 0 0 1 4.015-.527c.994.037 1.5.796 1.486 1.526-.017.83-.647 1.416-1.493 1.309zm5.141-9.125l-6-6A.505.505 0 0 0 13.5 0H.5a.5.5 0 0 0-.5.5v23a.5.5 0 0 0 .5.5h19a.5.5 0 0 0 .5-.5v-17a.504.504 0 0 0-.146-.354z" />
                </svg>
                AS 9100:2016 certificate
            </a>
        </li>
        <li>
            <a class="d-flex align-items-center" target="_blank" href="http://www.digitroncorp.com/SiteMedia/CommonResources/pdfs/Digitron-AS9100-Rev-D-certificate-20190316.pdf">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                    <path fill="#BF232A" fill-rule="evenodd" d="M14.68 13.434a10.816 10.816 0 0 0-2.502.193c1.049.389 1.983.57 2.657.653l.07.004c.266 0 .299-.24.3-.342.003-.081-.015-.487-.524-.508m-6.546.615c.44-.24.887-.454 1.34-.643a13.22 13.22 0 0 1-1.286-.917c.01.535-.008 1.056-.054 1.56m-3.239 3.875c-.132.162-.17.303-.116.417.122.257.595.316.83-.005a7.692 7.692 0 0 0 1.079-2.137c-.955.75-1.545 1.42-1.793 1.725M6.122 7.429c-.106 0-.27.087-.36.25-.092.163-.08.342.035.53.336.554.7 1.075 1.093 1.562a14.57 14.57 0 0 0-.585-2.152c-.07-.19-.152-.19-.183-.19M13 7V1l6 6h-6zm1.713 8.271a12.94 12.94 0 0 1-4.096-1.229 13.03 13.03 0 0 0-2.664 1.271c-.277 1.378-.792 2.593-1.535 3.613a1.516 1.516 0 0 1-1.226.644c-.559 0-1.087-.322-1.315-.799-.225-.472-.136-1.01.243-1.478.347-.428 1.312-1.514 2.926-2.586.156-.978.187-2.041.092-3.162a14.985 14.985 0 0 1-2.196-2.816c-.303-.499-.322-1.061-.051-1.542.259-.459.742-.758 1.231-.758.506 0 .926.315 1.121.842.15.409.646 1.862.855 3.812.79.745 1.665 1.376 2.607 1.88a11.999 11.999 0 0 1 4.015-.527c.994.037 1.5.796 1.486 1.526-.017.83-.647 1.416-1.493 1.309zm5.141-9.125l-6-6A.505.505 0 0 0 13.5 0H.5a.5.5 0 0 0-.5.5v23a.5.5 0 0 0 .5.5h19a.5.5 0 0 0 .5-.5v-17a.504.504 0 0 0-.146-.354z" />
                </svg>
                AS 9100:2016 certificate
            </a>
        </li>
    </ul>
    <!-- Start -->
    <ul class="list-unstyled pl-0 mb-0 certificates__group__item">
        <li>
            <a class="d-flex align-items-center" target="_blank" href="http://www.digitroncorp.com/SiteMedia/CommonResources/pdfs/Digitron-AS9100-Rev-D-certificate-20190316.pdf">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                    <path fill="#BF232A" fill-rule="evenodd" d="M14.68 13.434a10.816 10.816 0 0 0-2.502.193c1.049.389 1.983.57 2.657.653l.07.004c.266 0 .299-.24.3-.342.003-.081-.015-.487-.524-.508m-6.546.615c.44-.24.887-.454 1.34-.643a13.22 13.22 0 0 1-1.286-.917c.01.535-.008 1.056-.054 1.56m-3.239 3.875c-.132.162-.17.303-.116.417.122.257.595.316.83-.005a7.692 7.692 0 0 0 1.079-2.137c-.955.75-1.545 1.42-1.793 1.725M6.122 7.429c-.106 0-.27.087-.36.25-.092.163-.08.342.035.53.336.554.7 1.075 1.093 1.562a14.57 14.57 0 0 0-.585-2.152c-.07-.19-.152-.19-.183-.19M13 7V1l6 6h-6zm1.713 8.271a12.94 12.94 0 0 1-4.096-1.229 13.03 13.03 0 0 0-2.664 1.271c-.277 1.378-.792 2.593-1.535 3.613a1.516 1.516 0 0 1-1.226.644c-.559 0-1.087-.322-1.315-.799-.225-.472-.136-1.01.243-1.478.347-.428 1.312-1.514 2.926-2.586.156-.978.187-2.041.092-3.162a14.985 14.985 0 0 1-2.196-2.816c-.303-.499-.322-1.061-.051-1.542.259-.459.742-.758 1.231-.758.506 0 .926.315 1.121.842.15.409.646 1.862.855 3.812.79.745 1.665 1.376 2.607 1.88a11.999 11.999 0 0 1 4.015-.527c.994.037 1.5.796 1.486 1.526-.017.83-.647 1.416-1.493 1.309zm5.141-9.125l-6-6A.505.505 0 0 0 13.5 0H.5a.5.5 0 0 0-.5.5v23a.5.5 0 0 0 .5.5h19a.5.5 0 0 0 .5-.5v-17a.504.504 0 0 0-.146-.354z" />
                </svg>
                ISO 9001:2015 certificate
            </a>
        </li>
        <li>
            <a class="d-flex align-items-center" target="_blank" href="http://www.digitroncorp.com/SiteMedia/CommonResources/pdfs/Digitron-AS9100-Rev-D-certificate-20190316.pdf">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                    <path fill="#BF232A" fill-rule="evenodd" d="M14.68 13.434a10.816 10.816 0 0 0-2.502.193c1.049.389 1.983.57 2.657.653l.07.004c.266 0 .299-.24.3-.342.003-.081-.015-.487-.524-.508m-6.546.615c.44-.24.887-.454 1.34-.643a13.22 13.22 0 0 1-1.286-.917c.01.535-.008 1.056-.054 1.56m-3.239 3.875c-.132.162-.17.303-.116.417.122.257.595.316.83-.005a7.692 7.692 0 0 0 1.079-2.137c-.955.75-1.545 1.42-1.793 1.725M6.122 7.429c-.106 0-.27.087-.36.25-.092.163-.08.342.035.53.336.554.7 1.075 1.093 1.562a14.57 14.57 0 0 0-.585-2.152c-.07-.19-.152-.19-.183-.19M13 7V1l6 6h-6zm1.713 8.271a12.94 12.94 0 0 1-4.096-1.229 13.03 13.03 0 0 0-2.664 1.271c-.277 1.378-.792 2.593-1.535 3.613a1.516 1.516 0 0 1-1.226.644c-.559 0-1.087-.322-1.315-.799-.225-.472-.136-1.01.243-1.478.347-.428 1.312-1.514 2.926-2.586.156-.978.187-2.041.092-3.162a14.985 14.985 0 0 1-2.196-2.816c-.303-.499-.322-1.061-.051-1.542.259-.459.742-.758 1.231-.758.506 0 .926.315 1.121.842.15.409.646 1.862.855 3.812.79.745 1.665 1.376 2.607 1.88a11.999 11.999 0 0 1 4.015-.527c.994.037 1.5.796 1.486 1.526-.017.83-.647 1.416-1.493 1.309zm5.141-9.125l-6-6A.505.505 0 0 0 13.5 0H.5a.5.5 0 0 0-.5.5v23a.5.5 0 0 0 .5.5h19a.5.5 0 0 0 .5-.5v-17a.504.504 0 0 0-.146-.354z" />
                </svg>
                ISO 9001:2015 certificate
            </a>
        </li>
    </ul>
</div>

Comments

[Иван Иванов]

Попробуйте обернуть оба ul в один div в котором задайте text-align:left. По идее тогда этот div будет отцентровываться по центру, из-за родителя, а ul внутри этого div будут по левому краю. Если с text-align не прокатит. Попробуйте тогда этому div присвоить class="d-flex flex-wrap justify-content-start"

[OstapO]

Иван Иванов, Спасибо!

[Иван Иванов]

OstapO, получилось? )

[OstapO]

l@ZZiliST, да

Answer 1

[Johuginn]

Чтобы иконки были расположены ровно относительно друг друга, нужно убрать их центрирование — они будут выравниваться по левому краю (дефолтное состояние). Чтобы сохранить их расположение по центру, нужно обернуть элементы в отдельный блок и выравнивать уже его.