Minimialist网站：标头flexbox文本垂直居中于Chrome桌面，而不位于Chrome移动版。为什么？

问题描述 投票：0回答：1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

    <link href='https://fonts.googleapis.com/css?family=Niramit' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div id="main">
        <div class="bar">
            <div id="title" class="header-text">title</div>
        </div>
    </div>
</body>
</html>

https://jsfiddle.net/uey85nbj/

Chrome桌面：上方27像素，下方29像素

enter image description here

Chrome移动设备：上方40像素，下方31像素

enter image description here

html css flexbox centering
1个回答
0
投票
[如果您在包含文本的div上放置背景色，则会对正在发生的事情有所了解（这对我来说在Firefox和Chrome桌面上是这样，所以我不知道得到了您的第一个屏幕截图）：

green background on text showing how the text element is framed in its parent

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.