文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使一个字母动态填充页面

问如何使一个字母动态填充页面
EN

Stack Overflow用户

提问于 2016-10-11 11:16:49

回答 2查看 72关注 0票数 1

我有一封信集中在这一页上。我希望它真的很大(我的字体大小设置为2000%!)我如何使这个响应，使它位于所有屏幕的中心？在这个尺寸上，在调整浏览器大小时，字母周围的填充是一个真正的问题。我正试着为孩子们制作卡片来学习他们的信。

css

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-10-11 11:21:56

使用viewport units

1 1vh=视口高度的1/100.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow:hidden;
}

div {
  font-size: 99vh;
  text-align: center;
  line-height: 1;
}

<div>A</div>

Codepen Demo

票数 5

Stack Overflow用户

发布于 2016-10-11 11:30:18

您可以使用vh (查看端口高度)设置字母的字体大小，并使用Flex在页面上居中：

即：

<body>
    <div style="display: flex;justify-content: center;">
        <div style="align-self: center;">
            <span style="font-size: 95vh;line-height:1;">L</span>
        </div>
    </div>
</body>

希望能帮上忙。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39976036

复制

相似问题

问如何使一个字母动态填充页面
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使一个字母动态填充页面EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使一个字母动态填充页面
EN