✔ Box mittig zentrieren

[sebdev]

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.

 

[sebdev]

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