Überprüfen Sie den folgenden Code. Die Sache ist, wenn Sie mehr als ein Element in der Mitte des übergeordneten Elements beibehalten möchten. Fügen Sie text-center zu parent css und display:inline-block zur Anzahl der childs
Sie können Ihren HTML-Code leicht vereinfachen, Sie benötigen den zusätzlichen verschachtelten div.blocks-inner nicht.
Wenden Sie zuerst display: table auf ul an, um ein Element zum Verkleinern auf Blockebene zu erhalten, das Ihre Verknüpfungselemente umschließt. Sie können dann ul mit margin: 0 auto zentrieren.
Wenden Sie display: inline-block auf li an, wodurch diese Elemente inline bleiben, und verwenden Sie vertical-align: top , um das Grundlegendreieck-Problem zu beheben. Beachten Sie, dass Sie auf diese Weise den Abstand zwischen den Links mit Hilfe von Marge-rechts steuern können, und sehen Sie sich die nächste Regel mit :last-child an, um das letzte Element li aufzuräumen.
Alles andere mit dem a Styling ist in Ordnung.
Beachten Sie, dass die Verknüpfungselemente bei kleinen Bildschirmbreiten in eine zweite Zeile eingeschlossen werden. Dies kann jedoch festgelegt werden, wobei die Details von den allgemeinen Entwurfszielen abhängen.