将一个部分内的文本居中

Question

我想将文本“菜单”放到页面的中心。 我是html的新手，我确信这很简单，但我无法理解。

    body{
     background-color:#163350;
    background-repeat: repeat-x; 
    margin: 0;
    }



    header {
        background-color:#ded7c2;
        color:white;
        text-align:center;
        padding:5px; 
    	
    }
    h1{
    	font-family:"Courier New", Courier, monospace; 
    	font-size:30px;
    	color: #ffffff; 
    	text-align:center;
    } 
    h2{
    	font-family:"Courier New", Courier, monospace; 
    	font-size:20px;
    	color:#ffffff; 
    	text-align:center;
    } 
    p{
    	font-family:"Trebuchet MS", Helvetica, sans-serif;
        font-size:15px;
    	color:white;
    }
    nav {
      display: block;
      margin-left: auto;
      margin-right: auto
      font-family:"Courier New", Courier, monospace; 
      font-size:12px;
      color: #ffffff; 
      text-align:center;
      line-height:30px;
      background-color:#68594c;
      height:690px;
      width:100px;
      float:left;
      padding:0px; 
    }

    nav img {
      width: 60px;
    }

    nav ul{
      padding: 0;
    	list-style-type:none;
    	}


    section {
        width:400px;
        float:left;
        padding:10px; 
    }
    footer {
    	font-family:"courier new";
    	font-size:20px;	
       background-color:#ded7c2;
        color:white;
        clear:both;
        text-align:center;
        padding:5px; 
    	width: 100%;
    	height:37px;
    }
    img section{
    	float:left;
    	text-align:center;
    }
    img section two{
    	float:center;
    	text-align:center;
    	}
    img section three
    	float:right;
    	text-align:center;
    	}

    <div class= "container">
    <nav>
    <ul>
    <li><a href="home 3.html"><img src="images/home.png" alt="Home" ></a></li> <br><br><p>
    <li><a href="Menu.html"><img src="images/menu.png" alt="Menu"></a></li><br><br><p>
    <li><a href="Blank.html"><img src="images/blank.png" alt="Blank"></a></li><br><br><p>
    <li><a href="Blank.html"><img src="images/blanktwo.png" alt="Blank"></a></li><br><br><p>
    <li><a href="Blank.html"><img src="images/blank.png" alt="Blank"></a></li>

    </ul>
    </nav>
    <section>

    <h2>Menu</h2>
    <p> <p>text
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


    </p>
    </section>



    <footer>
    Copyright &copy; Jack  Ranata

    </footer>

非常感谢任何帮助。

Answer 1

试试这个

 section {
    width: 100%;

    h2 {
        font-family: "Courier New", Courier, monospace;
        font-size: 20px;
        color: #ffffff;
        width: 100%;
        margin: auto 0;
        text-align: center;

Answer 2

为了解决这个问题，幸运的是很简单。

由于“菜单”文本似乎在它自己的行上，你可以使用这个css。我将“菜单”文本命名为.menu

.menu {
  width: 100%;
  text-align:center;
}

这样做是因为它使h2标签成为父容器的整个宽度，然后它告诉自己将其个人文本与中心对齐。

我注意到'menu'h2标签的父容器设置为400px，这意味着文本不会完全对齐到屏幕中间。为了使其正常工作，您必须确保父容器是屏幕的整个宽度。

Answer 3

您可以使用<center>标记来执行此操作。

<center><h2>Menu</h2></center>

或者您可以使用内联css样式。

<h2 style="text-align:center;margin-left:auto;margin-right:auto;">Menu</h2>