✔ Box mittig zentrieren

[Sebastian Kiefer]

Nun ist der Button und die absätze verstellt. Gibt es dafür auch eine Lösung.
Sorry das ich jetzt nur nach Lösungen frage aber ich habe mir vorgenommen es heute noch hinzubekommen

 

[Sempervivum]

Dann versuchen wir es so:

    <section class="box">
        <a href="">
            <div class="icon-wrapper">
                <span class="icon">
                    <i class="fa fa-refresh major"></i>
                </span>
            </div>
            <h3>Publikationen</h3>
            <p class="title">Titel</p>
            <p>
                <button class="button">Mehr erfahren</button>
            </p>
        </a>
    </section>
    <style>
        .icon-wrapper {
            text-align: center;
        }
        .box .icon {
            display: inline-block;
            color: #ffffff;
            background: #629DD1;
            width: 3em;
            height: 3em;
            font-size: 2em;
            text-align: center;
            line-height: 3em;
            border-radius: 100%;
            box-shadow: 0 0 0 10px #fff, 0 0 0 11px rgba(144, 144, 144, 0.25);
        }

        .box {
            padding: 0 16px;
        }

Dann sollten die anderen Elemente bleiben wie sind.

 

[Sebastian Kiefer]

Vielen Dank! Es klappt

 

[Sempervivum]

Geht auch noch einfacher ohne zusätzlichen Wrapper:

    <section class="box">
        <a href="">
            <span class="icon">
                <i class="fa fa-refresh major"></i>
            </span>
            <h3>Publikationen</h3>
            <p class="title">Titel</p>
            <p>
                <button class="button">Mehr erfahren</button>
            </p>
        </a>
    </section>
    <style>
        .box .icon {
            margin: 0 auto;
            display: block;
            color: #ffffff;
            background: #629DD1;
            width: 3em;
            height: 3em;
            font-size: 2em;
            text-align: center;
            line-height: 3em;
            border-radius: 100%;
            box-shadow: 0 0 0 10px #fff, 0 0 0 11px rgba(144, 144, 144, 0.25);
        }

        .box {
            padding: 0 16px;
        }