时间戳

首页 > 解决方案 > 文字居中

css - 文字居中

问题描述

我想在特定区域（就在屏幕中间）有一个文本，我在 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.”&lt;/p>


</body>
</html>

这就是我想要的样子。感谢您的帮助，我还是个初学者！

https://i.stack.imgur.com/MBTjV.png

标签： csstextbackground

解决方案

   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.”&lt;/p>
</div>
</div>
</div>

推荐阅读