正中间的文字
Text right in the center
我想要在特定区域（就在屏幕中间）内放置一个文本，我在 Paint 中制作了自己的背景图像，并且我想要在其中放置一个段落（引用）。但无论我如何尝试，它都不适合我的手工制作背景。
这是代码：
<!DOCTYPE html>
<html lang='cs'>
<head>
<style>
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
position: relative;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
</style>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<p class="p" align="center">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</body>
</html>
这是我想要的样子。感谢您的帮助，我还是个初学者！
https://i.stack.imgur.com/MBTjV.png
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
position: relative;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
.mw1200{max-width:600px;margin:0 auto;}
.fw{width:100%;float:left;background:#fff;}
.paragraphbg{background:url(https://i.ibb.co/rZB3jCZ/star.png);}
.paragraphbg p{padding:10px 10%;font-size:28px;text-align:left;}
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<div class="fw paragraphbg">
<div class="mw1200">
<div class="fw">
<p class="p" align="center">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</div>
</div>
</div>
保证金方式：
您可以将 CSS 属性 width 与 viewport-relative unit vw 'so your content will size in function of the screen size) and the CSS property margin with the value auto 一起使用：
The browser selects a suitable margin to use. For example, in certain
cases this value can be used to center an element.
简而言之：
.p {
font-size: 20px;
width: 50vw; /* Added --- Setting the width of your p in % of the width of the screen */
margin:auto; /* Added --- make margin-left & margin-right even resulting of centering your p */
}
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
width: 50vw;
margin:auto;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<main>
<p class="p">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</main>
</body>
</html>
Flexbox 方式：
或者您可以使用 CSS flexbox 布局。
main{
display:flex; /* Added --- making the container a flexbox */
justify-content:center; /* Added --- centering its element(s) */
}
.p {
font-size: 20px;
position: relative;
width: 50vw; /* Added --- Setting the width of your p in % of the width of the screen */
}
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
main{
display:flex;
justify-content:center;
}
.p {
font-size: 20px;
position: relative;
width: 50vw;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<main>
<p class="p">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</main>
</body>
</html>
我想要在特定区域（就在屏幕中间）内放置一个文本，我在 Paint 中制作了自己的背景图像，并且我想要在其中放置一个段落（引用）。但无论我如何尝试，它都不适合我的手工制作背景。 这是代码：
<!DOCTYPE html>
<html lang='cs'>
<head>
<style>
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
position: relative;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
</style>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<p class="p" align="center">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</body>
</html>
这是我想要的样子。感谢您的帮助，我还是个初学者！
https://i.stack.imgur.com/MBTjV.png
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
position: relative;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
.mw1200{max-width:600px;margin:0 auto;}
.fw{width:100%;float:left;background:#fff;}
.paragraphbg{background:url(https://i.ibb.co/rZB3jCZ/star.png);}
.paragraphbg p{padding:10px 10%;font-size:28px;text-align:left;}
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<div class="fw paragraphbg">
<div class="mw1200">
<div class="fw">
<p class="p" align="center">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</div>
</div>
</div>
保证金方式：
您可以将 CSS 属性 width 与 viewport-relative unit vw 'so your content will size in function of the screen size) and the CSS property margin with the value auto 一起使用：
The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.
简而言之：
.p {
font-size: 20px;
width: 50vw; /* Added --- Setting the width of your p in % of the width of the screen */
margin:auto; /* Added --- make margin-left & margin-right even resulting of centering your p */
}
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
width: 50vw;
margin:auto;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<main>
<p class="p">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</main>
</body>
</html>
Flexbox 方式：
或者您可以使用 CSS flexbox 布局。
main{
display:flex; /* Added --- making the container a flexbox */
justify-content:center; /* Added --- centering its element(s) */
}
.p {
font-size: 20px;
position: relative;
width: 50vw; /* Added --- Setting the width of your p in % of the width of the screen */
}
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
main{
display:flex;
justify-content:center;
}
.p {
font-size: 20px;
position: relative;
width: 50vw;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<main>
<p class="p">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</main>
</body>
</html>