Html 垂直对齐文本的Css问题_Html_Css

Html 垂直对齐文本的Css问题

html css

Html 垂直对齐文本的Css问题,html,css,Html,Css,因此，我试图制作一个标题，但我看到的是：所以我试着垂直对齐文本（图像超出了框架），我几乎只看到Link1-5都混在一起了。有没有简单的解决办法 <!DOCTYPE html> <html> <head> <style> .header {padding:16pt;overflow:co} .headertext {color:#fff;text-decoration:none

因此，我试图制作一个标题，但我看到的是：

所以我试着垂直对齐文本（图像超出了框架），我几乎只看到Link1-5都混在一起了。有没有简单的解决办法

<!DOCTYPE html>
<html>
    <head>
        <style>
            .header {padding:16pt;overflow:co}
            .headertext {color:#fff;text-decoration:none;font-weight:bold;margin: 0 10pt;position: absolute;top: 25pt;}
        </style>
    </head>
    <body class="black" style="font-family: 'Varela Round', sans-serif;">
        <div class="header purple">
            <a href="#"><img src="Image" width="40" height="40" style="object-fit:cover;"></a>
            <a href="a" class="headertext">Link</a>
            <a href="a" class="headertext">Link</a>
            <a href="a" class="headertext">Link</a>
            <a href="a" class="headertext">Link</a>
            <a href="a" class="headertext">Link</a>
        </div>
    </body>
</html>


.header{填充：16pt；溢出：co}
.headertext{color:#fff；文本装饰：无；字体大小：粗体；边距：0 10pt；位置：绝对；顶部：25pt；}

使用CSS flexbox并移除绝对定位：

.header{
填充：16磅；
背景：紫色；
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}
.标题文字{
颜色：#fff；
文字装饰：无；
字体大小：粗体；
保证金：0.10pt；
}

太棒了！如果答案有帮助，一定要接受