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

- (Computer, Technik, Spiele und Gaming)

4 Antworten

entrage

19.01.2018, 22:31

Einen Text vertikal zu zentrieren war in CSS leider noch nie so einfach, wie man es sich wünschen würde.

Versuch es mal mit dem angepassten Code:

header {
  background-color: rgba(255,255,255,0.76);
  text-align: center;
 
  height: 130px;
  line-height: 130px;
  width: auto;
 
  padding-top: auto;
  padding-bottom: auto;
 
  border: 2px solid #ccc; /* Nur für Sichtbarkeit */
}
h1 {
  color: rgb(0,179,185);
  margin-top:0;
  font-size:70px;
}

border: 2px solid #ccc ist nicht nötig, ich habe um den header nur eine Kontur gemacht, damit man auch ohne Hintergrund sehen kann, wie groß der header-Bereich ist.

R4c1ngCube

Fragesteller

20.01.2018, 10:45

Danke. das hat auch funktioniert :)

Own3r

19.01.2018, 21:52

.vertical-text {
	transform: rotate(90deg);
	transform-origin: left top 0;
}

Woher ich das weiß:eigene Erfahrung – Technisches Verständnis - Geräte

R4c1ngCube

Fragesteller

19.01.2018, 21:57

Danke aber das ist nicht was ich meinte, auch wenn mir diese Klasse früher oder später weiterhelfen wird :)

Ich möchte, dass die Überschrift innerhalb des headers nach oben und unten den gleichen Abstand erhält, evtl hatte ich mich nicht exakt genug ausgedrückt.

Own3r

19.01.2018, 21:58

@R4c1ngCube

Achsooo....

Du kannst den TEXT mit padding-top: 10px; zentieren

Solltest du eine Grafik Zentrieren wollen margin-top: 10px;

10px ist natürlich auch änderbar in 15px, 16px...

ReiterinRita

19.01.2018, 22:02

Wie wär es wenn du deinem header in deiner CSS folgende Eigenschaft gibst:

vertical-align: middle

R4c1ngCube

Fragesteller

19.01.2018, 22:07

Hatte ich auch angenommen, allerdings passiert einfach nichts wenn ich das hinzufüge. Egal ob ich es im header oder in der Überschrift schreibe.

Hat das vielleicht mit irgendeinem meiner margins oder paddings zu tun?

ReiterinRita

19.01.2018, 22:11

@R4c1ngCube

Einfach mal den Code auskommentieren und ausprobieren ;)

R4c1ngCube

19.01.2018, 21:52

(Solange es noch nicht verbessert ist) -> nicht das Bild sondern die Überschrift soll zentriert werden.

Own3r

19.01.2018, 21:55

Was genau ist dein plan? Mache mit paint eine Skizze.

R4c1ngCube

Fragesteller

19.01.2018, 22:05

@Own3r

Ich glaube ich kann innerhalb eines Kommentars keine Bilder schicken, daher in Textform:

Der oberste weiße Kasten ist mein header. Im header habe ich eine Überschrift, welche bereits durch text-align mittig geschrieben ist, allerdings ist der Abstand innerhalb des Kastens nach oben und unten nicht gleich groß und ich habe keine Ahnung wie ich das erreichen könnte.

Ähnliche Fragen

JavaScript (html) Element zentrieren?

Hallo ich habe in JavaScript ein Element erstellen lassen und die Größe perfekt angepasst, nun muss es nur noch zentriert werden aber irgendwie funktioniert nichts, egal was ich versuche bleibt es immer in der linken oberen Ecke!

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

html Navigationsleiste zentrieren?

Hi, wie kann ich machen, dass die Navigationsleiste, bzw. die Items, also die verschiedenen Tabellenreihen zentriert werden?
Code & Seite siehe Bilder

...zur Frage

HTML Button zentrieren

Ich habe sehr lange gesucht und probiert, einen Button in zu zentrieren.Ich habs mit align="center" versucht.Hat leider nicht geklaptt. Button-Text Wie zentriere ich dies?

...zur Frage

Button mittig unter Bild Zentrieren HTML/CSS?

Hallo erstmal, ich bin komplett neu hier also bitte entschuldigt, falls ich irgendwas nicht richtig beachte. Zu meiner Frage: Ich möchte für eine Portfolio Site Vorschaubilder einer Gallery haben und darunter einen Zentrierten Button für den Link zu der jeweiligen Seite. Mein Problem ist jetzt, dass der Button sich leider nicht zentrieren lässt sondern immer links gebunden ist.

Mein HTML Code:

<section id="content">
<div>
<div id="studio"> 
<img src="img/Gallery_Preview/Studio.jpg" alt="Studio Aufnahmen">
<p><a class="button1" href="Studio.html">Studio</a></p>
</div>
</div>
</section>

Mein Css Code:

#studio {
margin: 30px ;
padding:4px;

}
#studio img {
width: 23%;
height: auto;
}
.button1 {
text-align: center;
width: 100%; 
}

P.s. ich bin Anfänger

Danke schon mal

...zur Frage

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zur Frage

div genau mittig zentrieren?

Hi, ich will ein <div> mittig zentrieren, also nicht nur horizontal sondern auch vertikal, also einfach in der Mitte des Bildschirms. Jemand ne Idee wie das gehen könnte, hab schon fast das ganze Internet durchkämmt...

So soll das am Ende sein... DANKE!!!

...zur Frage

Html canvas vertikal zentrieren?

Ich habe eine Html seite und darin ein Canvas mit einer Uhr basierend auf javascript. Diese möchte ich nun gerne in der mitte der Seite haben horizontal zentriert habe ich sie mit

allerdings weiß ich nicht wie es vertikal möglich ist. Kann mir jemand sagen wie das möglich ist?

...zur Frage

HTML-Schrift neben Bild zentrieren?

Hallo,

ich möchte eine Überschrift mittig auf einer Webseite zentrieren.

In der linken Ecke ist ein Logo und wenn ich mit align: "Center" die Schrift zentrieren möchte kann ich sie nur zwischen dem rechten Ende des Logos und dem rechten Ende des Bildschirms zentrieren und nicht allgemein mittig.

Ich freue mich über eure Hilfe.

...zur Frage

HTML und CSS: Text im Button zentrieren?

Auf dem Bild ist ein Bild der Buttons, HTML und meiner CSS Datei.

Ich möchte jetzt den Text in den Buttons, also "Youtube" und "Spotify", zentriert und etwas größer ist.

...zur Frage

Wie kann ich einen Button vertikal zentrieren?

Ich habe auf meiner Webseite einen Button, der ganz allein auf der Startseite stehen soll. Er ist schon horizontal zentriert mit diesem Code:

"div align= center"

Wie kann ich den Button nun noch vertikal zentrieren?

DANKE!

...zur Frage

HTML / CSS Wieso lässt sich mein Text nicht zentrieren?

Hier der Code: https://jsfiddle.net/JetztMitte/mL1t3hwn/1/

...zur Frage

Wie kann ich die Punkte von einer <ul> auch zentrieren?

Ich habe bereits für die Liste: text-align: center; , justify-content: center; und align-items: center;.

...zur Frage

Indesign - Wie zentriere ich mein Text?

Wenn man ein Text im Textfeld hat, kann man denn ja zentrieren. So das er horizontal sowie auch vertikal zentriert von dem Textfeld gesetzt wird. Mit dem Befehl " zentrieren" (siehe Abbildung) wird der Text jedoch nur in horizontaler Ebene zentriert, aber ich bräuchte es noch horizontal.

Leider weiß ich nicht mehr wie ich das machen kann. Kann mir da jemand vielleicht helfen?

Vielen Dank schonmal im Vorraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen