✔ Box mittig zentrieren

[sebdev]

Hallo zusammen,
ich möchte gerne das das "icon" mittig in der box zentriert ist geht das irgendwie?

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

.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]

Wenn ich dich richtig verstehe, musst Du das CSS auf die Box und nicht auf das Icon anwenden, dann ist das Icon zentriert:

 

[sebdev]

Ist schon spät
Kannst du mir villeicht ein bespiel geben?

 

[Sempervivum]

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

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

 

[sebdev]

Da ist bei mir aber alles kaputt :-(

 

[sebdev]

Geht es nicht irgendwie mit dem span element?

 

[Sempervivum]

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]

So vielleicht?

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

 

[sebdev]

Und da soll .major mittig zentriert sein

 

[Sempervivum]

Verstehe. Dann sollte dies CSS es tun:

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