您可以直接从MDN:https://developer.mozilla.org/en-美国/docs/web/css/place-items

使用flex-box，尝试以下操作:

您可以跳过它，因为它将覆盖文档中的每个元素，并且您必须手动设置边距和填充

<div class="fresh">
    <img width="160" src=logo.svg>
</div>

<div class="icons-inline">
    <ul class="icons">
        <a href="https://www.hypeunit.co" class="hype"><svg>insert super long svg</svg></a>
        <a href="https://twitter.com/Fresheys" class="twitter"><svg>insert super long svg</svg></a>
        <a href="https://www.youtube.com/channel/UCjD9wyRBMV9hqC2snDGqEUA" class="youtube"><svg>insert super long svg</svg></a>
        <a href="https://twitch.tv/fresheys" class="twitch"><svg>insert super long svg</svg></a>
        <a href="https://discord.com/invite/ez6YhCs" class="discord"><svg>insert super long svg</svg></a>
        <a href="https://www.tiktok.com/@fresheys?" class="tiktok"><svg>insert super long svg</svg></a>
        <a href="https://instagram.com/fresheys" class="instagram"><svg>insert super long svg</svg></a>
    </ul>
</div>

HTML:

<div class="fresh">
    <img width="160" src=logo.svg>
</div>

<div class="icons-inline">
    <ul class="icons">
        <a href="https://www.hypeunit.co" class="hype"><svg>insert super long svg</svg></a>
        <a href="https://twitter.com/Fresheys" class="twitter"><svg>insert super long svg</svg></a>
        <a href="https://www.youtube.com/channel/UCjD9wyRBMV9hqC2snDGqEUA" class="youtube"><svg>insert super long svg</svg></a>
        <a href="https://twitch.tv/fresheys" class="twitch"><svg>insert super long svg</svg></a>
        <a href="https://discord.com/invite/ez6YhCs" class="discord"><svg>insert super long svg</svg></a>
        <a href="https://www.tiktok.com/@fresheys?" class="tiktok"><svg>insert super long svg</svg></a>
        <a href="https://instagram.com/fresheys" class="instagram"><svg>insert super long svg</svg></a>
    </ul>
</div>

如果您想要一个水平显示元素，只需添加类到它，它将水平显示，然后您可以添加这个规则来更好地处理这些类型的列表，例如。G:

<div class="fresh">
    <img width="160" src=logo.svg>
</div>

<div class="icons-inline">
    <ul class="icons">
        <a href="https://www.hypeunit.co" class="hype"><svg>insert super long svg</svg></a>
        <a href="https://twitter.com/Fresheys" class="twitter"><svg>insert super long svg</svg></a>
        <a href="https://www.youtube.com/channel/UCjD9wyRBMV9hqC2snDGqEUA" class="youtube"><svg>insert super long svg</svg></a>
        <a href="https://twitch.tv/fresheys" class="twitch"><svg>insert super long svg</svg></a>
        <a href="https://discord.com/invite/ez6YhCs" class="discord"><svg>insert super long svg</svg></a>
        <a href="https://www.tiktok.com/@fresheys?" class="tiktok"><svg>insert super long svg</svg></a>
        <a href="https://instagram.com/fresheys" class="instagram"><svg>insert super long svg</svg></a>
    </ul>
</div>

您的代码可以如下所示:

<div class="fresh">
    <img width="160" src=logo.svg>
</div>

<div class="icons-inline">
    <ul class="icons">
        <a href="https://www.hypeunit.co" class="hype"><svg>insert super long svg</svg></a>
        <a href="https://twitter.com/Fresheys" class="twitter"><svg>insert super long svg</svg></a>
        <a href="https://www.youtube.com/channel/UCjD9wyRBMV9hqC2snDGqEUA" class="youtube"><svg>insert super long svg</svg></a>
        <a href="https://twitch.tv/fresheys" class="twitch"><svg>insert super long svg</svg></a>
        <a href="https://discord.com/invite/ez6YhCs" class="discord"><svg>insert super long svg</svg></a>
        <a href="https://www.tiktok.com/@fresheys?" class="tiktok"><svg>insert super long svg</svg></a>
        <a href="https://instagram.com/fresheys" class="instagram"><svg>insert super long svg</svg></a>
    </ul>
</div>

您将拥有一个大小与fhe窗口相同的主容器，其元素居中，在其中您将拥有一个元素水平对齐的列表

创建一个至少与屏幕一样大的容器，并将内容与容器的中心对齐。

元素的居中可由flexbox处理。您只需要确保保存徽标和社交媒体图标列表的容器与用户可能拥有的任何屏幕一样大。您可以使用viewport-percent sizes，例如，表示“使此元素的高度至少为视口高度的100%”，其中视口是浏览器窗口的大小。

以下是一个可行的解决方案: