Box mittig zentrieren

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
Wenn ich dich richtig verstehe, musst Du das CSS auf die Box und nicht auf das Icon anwenden, dann ist das Icon zentriert:
box-zentriert.png
 

Sempervivum

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