Centering Text in einem Abschnitt

Ich möchte den Text „Menü“ in der Mitte der Seite bringen. Ich bin neu bei HTML und ich bin sicher, es ist einfach, aber ich kann es einfach nicht herausfinden.

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

 

 

 
    header { 
 
     background-color:#ded7c2; 
 
     color:white; 
 
     text-align:center; 
 
     padding:5px; 
 
    \t 
 
    } 
 
    h1{ 
 
    \t font-family:"Courier New", Courier, monospace; 
 
    \t font-size:30px; 
 
    \t color: #ffffff; 
 
    \t text-align:center; 
 
    } 
 
    h2{ 
 
    \t font-family:"Courier New", Courier, monospace; 
 
    \t font-size:20px; 
 
    \t color:#ffffff; 
 
    \t text-align:center; 
 
    } 
 
    p{ 
 
    \t font-family:"Trebuchet MS", Helvetica, sans-serif; 
 
     font-size:15px; 
 
    \t 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; 
 
    \t list-style-type:none; 
 
    \t } 
 

 

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

<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>

Jede Hilfe wäre sehr dankbar.

Quelle

2016-08-14 Ana G

versuchen diese

section { 
    width: 100%; 

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

Quelle

2016-08-14 21:34:13

ich kann sehen, wie das funktionieren würde, aber es ist in einem rechteckigen Abschnitt. Also der Text ist eigentlich zentriert, ich möchte nur den Abschnitt über die ganze Seite vergrößern ... –

überprüfen Sie meinen Beitrag erneut. @AnaG –

Hat das überhaupt geholfen? @AnaG –

, um dieses Problem zu lösen, ist es zum Glück ganz einfach.

Da es scheint, dass der 'Menü' Text in einer eigenen Zeile ist, können Sie diese CSS verwenden. Ich gab den ‚Menü‘ Text die Klasse .menu

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

Was das bedeutet ist, dass es den h2-Tag, die volle Breite des übergeordneten Containers macht es dann selbst seinen persönlichen Text in die Mitte auszurichten erzählt.

Ich stelle fest, dass der übergeordnete Container des 'Menü' h2-Tags auf 400px eingestellt ist, das bedeutet, dass der Text nicht perfekt auf die Mitte des Bildschirms ausgerichtet wird. Damit dies funktioniert, MÜSSEN Sie sicherstellen, dass der übergeordnete Container die gesamte Breite des Bildschirms aufweist.

Quelle

2016-08-14 21:36:49

Ich habe das versucht, aber es hat nicht funktioniert –

@AnaG Wow, das ist sehr seltsam. Wenn das nicht funktioniert, versuchen Sie, das h2-Tag auf eine bestimmte Breite zu setzen und dann mit margin: 0 auto auf die Mitte auszurichten. Dies richtet immer alles mit beliebiger Breite an der Mitte seines übergeordneten Containers aus. –

Sie können dazu <center> Tag verwenden.

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

Oder Sie können den Inline-CSS-Stil verwenden.

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

Quelle

2016-08-14 21:37:30

Centering Text in einem Abschnitt

Antwort

Verwandte Themen