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;
    }
 
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
 
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;
        }
 
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?
 
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>
 
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;
        }
 
Zurück