Flex 框居中在桌面上有效,但在 phone 视图中不完全有效
Flex box centering works in desktop but not quite in phone view
使用flexbox,组成页面的两个独立的句子在中间。但是,当我在 phone 上查看该网站时,第二个句子沿左侧对齐。
How the site looks on a phone
我试过使用@media 和居中对齐来定位尺寸,特别是第二句没有成功。
<!DOCTYPE html>
<html>
<head>
<title>Jefferson's Virginia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{
height: 100%;}
body {
background-color: #999;}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
p.one {
font-family: "Times New Roman", Times, serif;
font-size: 1.75em;
font-weight: bold;}
p.two {
font-family: "Times New Roman", Times, serif;
font-size: 1.75em;
font-weight: bold;}
</style>
</head>
<body>
<div class="wrapper">
<p class="one"> Jefferson's Virginia Website </p>
<br>
<p class="two"> In Process of Being Re-constructed </p>
</div>
</body>
</html>
您需要将“text-align:center”添加到包装器 CSS 以保持包装文本居中,即使在包装时也是如此
.wrapper {
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
使用flexbox,组成页面的两个独立的句子在中间。但是,当我在 phone 上查看该网站时,第二个句子沿左侧对齐。 How the site looks on a phone
我试过使用@media 和居中对齐来定位尺寸,特别是第二句没有成功。
<!DOCTYPE html>
<html>
<head>
<title>Jefferson's Virginia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{
height: 100%;}
body {
background-color: #999;}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
p.one {
font-family: "Times New Roman", Times, serif;
font-size: 1.75em;
font-weight: bold;}
p.two {
font-family: "Times New Roman", Times, serif;
font-size: 1.75em;
font-weight: bold;}
</style>
</head>
<body>
<div class="wrapper">
<p class="one"> Jefferson's Virginia Website </p>
<br>
<p class="two"> In Process of Being Re-constructed </p>
</div>
</body>
</html>
您需要将“text-align:center”添加到包装器 CSS 以保持包装文本居中,即使在包装时也是如此
.wrapper {
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}