Anzeige

 Box mittig zentrieren

#1
Hallo zusammen,
ich möchte gerne das das "icon" mittig in der box zentriert ist geht das irgendwie?
HTML:
<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>
CSS:
.box .major {
  display:block;
  margin: 1.25em 0 1.25em 0;
  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;
    }
 

Sempervivum

Erfahrenes Mitglied
#4
Aus dem Screenshot ist doch alles ersichtlich:
Statt .box .major { ohne das .major: -box {

CSS:
        .box {
            display: block;
            margin: 1.25em 0 1.25em 0;
            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;
        }
 

Sempervivum

Erfahrenes Mitglied
#7
Ja, ich schrieb ja, dass ich nicht weiß, was Du eigentlich vor hast. Alles untereinander in der Box, Icon, Überschrift, Absatz mit Titel und Button? Und das Icon zentriert?
 

Sempervivum

Erfahrenes Mitglied
#8
So vielleicht?
box-zentriert-2.png

CSS:
    <style>
        .box .icon {
            display: inline-block;
            margin: 1.25em 0 1.25em 0;
            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;
            text-align: center;
        }
    </style>
 

Sempervivum

Erfahrenes Mitglied
#10
Verstehe. Dann sollte dies CSS es tun:
CSS:
        .box .icon {
            display: inline-block;
            color: #ffffff;
            background: #629DD1;
            width: 3em;
            align-self: center;
            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;
        }
        .box a {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
 
#11
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
#12
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
#14
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;
        }
 
Anzeige
Anzeige