Box mittig zentrieren

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

Erfahrenes Mitglied
Dann versuchen wir es so:
HTML:
    <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.
 

Sempervivum

Erfahrenes Mitglied
Geht auch noch einfacher ohne zusätzlichen Wrapper:
Code:
    <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;
        }
 

Neue Beiträge