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>

3 Antworten

XGamerGuide

15.07.2022, 14:51

text-align

Der ist in der Mitte. Es kann daran liegen, dass du die alte Seite noch um Cache hast. Strg + F5 um den Cache der aktuellen Seite zu clearen

Woher ich das weiß:Hobby – Programmiere seit einigen Jahren intensiv

Trebor938

Fragesteller

15.07.2022, 14:51

Ich meinte horizontal in der Mitte

XGamerGuide

15.07.2022, 15:07

@Trebor938

Das ist horizontal schon on der Mitte. Meinst du vertikal? Horizontal ist von Links nach Rechts

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, programmieren, Programmieren & Softwareentwicklung

15.07.2022, 18:58

display: flex (und die dazugehörigen Eigenschaften wie "justify-content" und "align-items") gibt man immer dem Eltern-Element. In diesem Fall also dem body.

Flexbox beschreibt nämlich, wie die Kind-Elemente innerhalb des Flex-Elements positioniert werden sollen. Und dein h1 hat ja nichtmal Kind-Elemente (außer vlt. das <br>) ...

    <style>
        body {
          height: 100vh;
          width: 100vw;
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
        }
    </style>

Demo: https://jsfiddle.net/dLvknmt0/

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

Von Experte MrAmazing2 bestätigt

elmex7

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

15.07.2022, 15:32

Das flex wirkt auf Unterelemente, nicht auf Textinhalt. Musst also um dein h1 einen block machen und den die flex styles geben. Und dann brauch der auch die entsprechende Höhe. Beispielsweise sowas:

<div class="flexbox"><h1>Text hier</h1></div>
<style>
.flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.flexbox h1 {
  text-align: center;
}
</style>

Ähnliche Fragen

wie findet ihr mein login feld?

habe ein kleines login feld gemacht und später kommt noch python dazu

code html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</header>

<main>

<h1 class="h1" >login</h1>

<h4> <a href="#">Password vergessen?</a></h4>

</form>

</div>

</main>

</footer>

</body>

</html>

css

body {

float: inline-start;

margin-top: 15%;

}

h1 {

font-family: sans-serif;

color: darkblue;

}

#Anmeldefeld {

display: flex;

align-items: center;

justify-content: center;

box-shadow: 20px 20px 10px gray;

border-style: solid;

}

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

DE Sonderzeichen Fehler in HTML?

Hi,

ich sitze momentan an einer Datei, um ein paar Dinge auszuprobieren. Ich habe die Meta-Tags wie gewohnt aus einer anderen (funktionierenden) Datei kopiert.

Nun werden allerdings ausschließlich in meiner Datei die Umlaute wie Ä,Ö,Ü und ß mit

"�"

angezeigt. Auch das rein-kopieren Tags aus anderen Dateien, oder das entfernen des Stylesheets hat nix geändert. Kurzzeitig hatte ich auch den Meta-Tag:

mit reingenommen, allerdings ohne Erfolg oder Veränderungen. Auch das Debugging von W3C hat nix auffälliges gefunden:

Für alle helfenden Hände großes Danke!

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="example, html, head, meta">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="formate.css">
    <title>Das Box-Modell</title>
  </head>


<body>
  <header>
      
    <div class="flex">
     <img src="bilder/logo.svg" alt="logo">
    </div>
    
     <h1>Wilkommen auf der Test-Seite!</h1>
     <nav>
              <a href="#link_1.html">Blog</a>
              <a href="#link_1.html">Unterseite 1</a>
              <a href="#link_1.html">Unterseite 2</a>
              <a href="#link_1.html">Kontakt</a>
     </nav>
          
    </header>
      
      <main>
          
          <h2>ÜÜÜCCS-basierte Layouts <br><br />HTML-Struktur ohne CSS</h2>         
          
      </main>
    
    
    
    <footer>
     <a href="kontakt.html">Kontakt</a>
     <p>&copy; 2024 by GTA1A</p>
    </footer>


</body>
</html>

...zur Frage

html/css box neben box bekommen?

Bekomme mit diesem code meine box in die andere box. will sie aber ausserhalb der box haben:

<!DOCTYPE html>
<html lang="de">
<head>
<title>Spezialitäten</title>
<meta charset="UTF-8"/>
<style type="text/css">
h1 {
font-size: 80px;
text-align: left;
color: red}
.hauptbox {
background-image: url(1783.jpg);
background-size: cover;
width: 1500px;
height: 600px;
border: solid;
}
.banner {
height: 200px;
border: solid;
margin: 25px;
width: 1450px;
}
.link {
width: 206px;
height: 300px;
border: solid;
float: right;
color: white;
A:active {color:red};
}
</style>
</head>
<body bgcolor="lightblue">
<div class="hauptbox">
<div class="banner">
<h1>Gdddd</h1>
</div>
<div class="link"
<a name="suche"><h4>Zurück zum Anfang</h4></>
</body>
</html>

...zur Frage

Wie kann ich das beheben?

<!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>SusgUY446's Homepage</title>
 <style>
   body {

     align-items: center;
     background-color: lightgreen;
   }

   .account-container {
     align-content: center;
     background-color: white;
     padding: 10px;
     border-radius: 4px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
     text-align: center;

   }

   .header-1 {
     align-self: center;
     text-align: center;

   }
 </style>
</head>
<body>
 <h1 class="header-1">My Homepage</h1>
 <br>
 <br>
 <br>

 <div class="account-container">
   <h3>My Accounts</h3>
   <a href="https://www.youtube.com/@susguy446" class="yt-link">My YouTube Channel</a><br>
   <a href="https://discord.gg/Ghx5QSaft2" class="dc-link">My Discord Server</a>
   <a href="https://www.roblox.com/users/3559739399/profile">My Roblox Account</a>
 </div>

</body>
</html>

...zur Frage

HTML Code funktioniert nicht Bild wir mit Platzhalter ersetzt?

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LIHI Haircuts</title>
 </head>
 <body>
  <img src="/Bilder/Salon.jpg">
 </body>
</html>

Das ist der Code bis jetzt und angezeigt wird mir nur ein Platzhalter. Ich haben einen Ordner namens "Haircut Seite" auf dem Desktop angelegt. Darin befindet sich die ".html" Datei und ein weiter Ordner Namens "Bilder", dort sind dann die Bilder die ich für die Website nutzen möchte. Die Bilder sind auch alle .jpg Dateien. Weiß jemand weiter ?

...zur Frage

Html Login?

Hallo, ich habe folgenden Code:

<!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>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>


<div class="center">
    <h1>Anmelden</h1>
    <form method="post">
    


<div class="txt_field">
    <input type="text" required>
    <label>Benutzername</label>
</div>


<div class="txt_field">
    <input type="password" required>
    <label>Passwort</label>
</div>
<div class="pass">Passwort vergessen?</div>
<input type="submit" value="Anmelden">
<div class = "signup_link">
  Noch kein Nutzer?  <a href="regis.html">Registrieren</a>


</form>
</div>


</body>
</html>

Dies ist der CSS Code:

body {
    margin: 0;
    padding: 0;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: linear-gradient(120deg, #2980b9, #8e44ad);
}


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

Leider klappt nicht alles. Hab ich was falsch gemacht=

...zur Frage

JavaScript / jQuery - Warum funktioniert das nicht?

Hallo,

ich möchte hier Absatz 2-5 eine Klasse ('abschnitt') geben und deren Text ändern zu 'neuer jQuery Text'.

Wieso funktioniert das hier nicht?

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    'use strict';

    document.onload = function() {
      for (var i = 1; i < document.querySelectorAll('p').length; i++) {
        document.querySelectorAll('p')[i].classList.add('abschnitt');
        $('.abschnitt').text('neuer jQuerytext');
      }
    }
  </script>
  <script></script>
  <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>
  <br>
  <h1> Überschrift </h1>
  <h2 id="ü2"> Überschrift h2 </h2>
  <p id="p1"> Absatz 1 </p>
  <p id="p2"> Absatz 2</p>
  <p> Absatz 2</p>
  <p> Absatz 3</p>
  <p> Absatz 4</p>
  <p> Absatz 5</p>
</body>
</html>

...zur Frage

index.php geht nicht (xampp)?

Tach, ich habe aus langeweile eine Website angefangen zu programmieren und da ich in die index.html ein bisschen php packen wollte, habe ich sie index.php genannt, seitdem bekomme ich diesen error (davor ging es, als es noch index.html hieß):

Jemand eine Ahnung wie man das fixen könnte?

Code:<!DOCTYPE html>
<html lang="en">


<head>


    <link rel="stylesheet" href="style.css">
    <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>HallOfEdits</title>
    <script src="js/homeBtns.js"></script>
    <div class="top">


        <h1 id="logo">Hall Of Edits</h1>


        <button id="login" type="button" onclick="login()">Login/Register</button>
        <button id="upload" type="button" onclick="uploadFile()">Upload</button>
        <button id="username" type="button" onclick="openProfile()"><button>
    </div>


</head>


<body style="background-color: #141414">
    <?php include 'session.php';?>
</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

jQuery Eingabe unten einfügen?

Ich soll einen Code schreiben, der die Eingabe nach dem drücken des Buttons unten auflistet (wie im Bild gezeigt). Kann mir jemand sagen was ich falsch gemacht habe?

Hier mein Code:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Praktikum Webanwendungen 1</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <style>
        h1{
            font-size: 50px;
        }


        div{
            float: left;
            margin: 10px;
        }


        .aufgabe{
            font-weight: bold;
            font-size: larger;
        }
       
        .liste{
            border: solid black;
        }
    </style>
    <body>
        <h1>Todo Liste</h1>
        <div class="aufgabe">Aufgabe:</div>
        <div class="eingabe"> <input type="text"> </div>
        <div class="erstellen"> <input type="submit" value="Erstellen"> </div>
        <br><br>
        <p class="liste"></p>
    </body>
    <script>
        $(document).ready(function(){
            $(".erstellen").click(function(){
                $("input").appendTo(".liste");
            });
        });
    </script>
  </body>
</html>

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

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

jQuery lädt nicht?

Hallo,

ich brauche Hilfe bei diesem Code:

Index:

<!DOCTYPE html>
<html lang="de">
  <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>Dokument</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        $("#nav").load("nav.html");
      });
    </script>
    <link rel="stylesheet" href="style.css"><link>
  </head>
  <body>
    <div id="nav"></div>
  </body>
</html>

geladene Datei:

<!DOCTYPE html>
<html lang="de">
  <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>Dokument</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        $("#nav").load("nav.html");
      });
    </script>
    <link rel="stylesheet" href="style.css"><link>
  </head>
  <body>
    <div id="nav"></div>
  </body>
</html>

Das Problem ist, dass wenn ich die Index mit einem Live Server starte dann kann ich auch die geladene Navigation sehen, aber wenn ich sie normal öffne (Doppelklick auf die Datei (Chrome)) dann geht es nicht.

Danke im voraus

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen