H1 in der Mitte ausrichten?

Mit text-align hab ich meinen h1 zentriert. Wie bekomm ich ihn aber, dass er nicht nur oben in der Mitte ist sondern in der Mitte Mitte, also im mitten Bildschirm oder Tab?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

Beantworter247

09.12.2022, 16:40

Um ein HTML-Element wie den <h1>-Tag in der Mitte des Bildschirms oder des aktuellen Tabs zu zentrieren, kannst du die CSS-Eigenschaft position mit den Werten absolute und top sowie left verwenden.

Hier ist ein Beispiel, wie das aussehen könnte:

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Die Eigenschaft position: absolute sorgt dafür, dass das Element aus dem normalen Fluss des HTML-Dokuments entfernt und an der angegebenen Position positioniert wird. Die Eigenschaften top und left geben an, dass das Element 50% von oben und 50% von links im aktuellen Fenster positioniert werden soll.

Um das Element dann tatsächlich in der Mitte des Bildschirms oder Tabs zu positionieren, musst du noch die transform-Eigenschaft mit dem Wert translate(-50%, -50%) verwenden. Dies verschiebt das Element um 50% nach links und um 50% nach oben, so dass es genau in der Mitte des Fensters positioniert wird.

Hoffe, das hilft! Bitte lass mich wissen, falls du noch weitere Fragen hast.

w211sz

Fragesteller

09.12.2022, 17:07

Hat mir sehr geholfen ja, vielen dank

w211sz

Fragesteller

09.12.2022, 17:11

Wie kann ich das machen, dass ich zb einen h3 oder h4 direkt unter dem h1 den ich zentriert habe, hinzumachen?

Beantworter247

09.12.2022, 17:17

@w211sz

Um einen <h3>- oder <h4>-Tag direkt unter einem zentrierten <h1>-Tag anzuzeigen, kannst du die Eigenschaft display: block für beide Elemente verwenden. Dies sorgt dafür, dass jedes Element auf einer neuen Zeile angezeigt wird und der Text innerhalb des Elements zentriert ist.

Hier ist ein Beispiel:

h1, h3, h4 {
  display: block;
  text-align: center;
  /* andere CSS-Eigenschaften für das h1-, h3- und h4-Element */
}

Du kannst auch die Eigenschaft margin verwenden, um den Abstand zwischen den beiden Elementen festzulegen.

h1, h3, h4 {
  display: block;
  text-align: center;
  margin: 10px 0;
  /* andere CSS-Eigenschaften für das h1-, h3- und h4-Element */
}

In diesem Beispiel wird der Abstand zwischen dem <h1>- und <h3>- bzw. <h4>-Tag auf 10 Pixel festgelegt.

Ich hoffe, dass diese Informationen hilfreich für dich sind. Lass mich wissen, wenn du noch weitere Fragen hast.

w211sz

Fragesteller

09.12.2022, 17:19

@Beantworter247

Vielen Dank :D Noch eine Frage...

Wie kann ich mehrere Kästchen, nebeneinander oder auch quer durch den Bildschirm machen, wo ich draufklicke und auf die nächste Website komm?

Beantworter247

09.12.2022, 17:22

@w211sz

Um mehrere Kästchen auf deinem Bildschirm zu erstellen, die du anklicken und auf die nächste Website wechseln kannst, könntest du eine Webseite erstellen und HTML und CSS verwenden, um die Kästchen zu erstellen und sie mit Links zu den jeweiligen Websites zu verknüpfen. Hier ist ein Beispiel dafür, wie das aussehen könnte:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 10px;
  border: 2px solid black;
}


.box:hover {
  background-color: lightgray;
}
</style>
</head>
<body>


<a href="https://www.website1.com"><div class="box"></div></a>
<a href="https://www.website2.com"><div class="box"></div></a>
<a href="https://www.website3.com"><div class="box"></div></a>
<a href="https://www.website4.com"><div class="box"></div></a>


</body>
</html>

Dieses Beispiel erstellt vier Kästchen, die nebeneinander angeordnet sind und beim Anklicken auf die entsprechenden Websites verlinken. Du kannst die Größe und das Layout der Kästchen anpassen, indem du die CSS-Eigenschaften änderst. Wenn du weitere Informationen zum Erstellen von Webseiten mit HTML und CSS benötigst, empfehle ich dir, online nach Tutorials und Ressourcen zu suchen.

Hi,

also ich habe ein Text erstellt, und habe diesem gesagt "text-align: center", und eine max-width: 20%;

Aber ernimmt zwar jetzt die 20% max-width, aber zentriert den Text nicht mehr Links?

warum?

...zur Frage

HTML FLEX: Wie bekomme ich ein Label in einem Radiobutton zentriert?

https://jsfiddle.net/dtqjp3zr/

Die Labels sind Teil der Divs und haben 50% Breite. Für das Div klappt das auch, nur der Label-Text selbst will einfach nicht in die Mitte.
Wo ist da mein Denkfehler?

...zur Frage

Punkte bei einer ul in html mittig formatieren?

Ich habe mehrere li in einer ul. Ich habe aber den Text mittig formatiert, nur sind die Punkte noch rechts, von der unordered list, der Text aber mittig. Wie bekomm ich die Punkte auch in die Mitte?

...zur Frage

Wie bekomme ich die Überschrift in die Mitte?

https://jsfiddle.net/qur0v829/

Das "Moin" soll in die Mitte, aber mit z.B. text-align: center; oder margin: 0 auto; klappt es irgendwie bei mir nicht, wie löse ich das Problem?

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}

...zur Frage

HTML - Text vertikal zentrieren?

Hat jemand von euch eine Idee warum die Überschrift nicht mittig zentriert wird? Ich habe es mit vertical-align, align-content und align-items usw probiert aber nichts zeigt einen Effekt.

https://images.gutefrage.net/media/fragen/bilder/html---text-vertikal-zentrieren/0_big.png?v=1516395008803"/>

...zur Frage

Was kann ich in den HTML Header schreiben, damit der Text in der Website in der Mitte schmal zentriert ist.?

Also, links und recht ein großer Abstand, und nur in der Mitte der Text, höchstens ein Drittel des Bildschirms einnehmend, was muss ich da in die HTML Styles oder so schreiben, danke

...zur Frage

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

...zur Frage

Textfeld in die Mitte bringen?

Bei meiner Webseite würde ich gerne die Überschrift die einen farbigen Hintergrund hat in die Mitte verbschieben. Und ich weiss um den Text in die Mitte des Textfelds zu bekommen muss ich text-align: center; schreiben aber wie bring ich dann noch das Textfeld in die Mitte der Seite?

...zur Frage

Photoshop ausrichten?

Hallo,

ich teste gerade rum und ich habe 2 Linien auf der Grundebene und einen Text auf der 2ten Ebene. Ich möchte das dieser genau in der Mitte zentriert wird. Gibt es da Hilfen?

Tipps?

...zur Frage

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zur Frage

HTML Text verschieben?

Ich möchte den text horizontal mittig haben justify-content und align-items gehen beide nicht


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .WelcomeTitle {
           display: flex;
           flex-direction: column;
          
            text-align: center;
            align-items: center;
            font-family: sans-serif;
        }
    </style>
    <h1 class="WelcomeTitle">Hier kommt ein Titel
        <br>
        hin der Lang ist!</h1>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen