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?

Bild zum Beitrag

3 Antworten

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

09.09.2021, 11:05

Gib dem Textfeld-Element

display: inline;
/* oder display: inline-block; */

Und seinem Parent-Element

text-align: center;

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

FaTech

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

09.09.2021, 10:52

Schau dir mal Flexboxen oder Grid an

siljalul

Fragesteller

09.09.2021, 10:56

Heyy ich hab meine Ausbild erst begonnen und bin noch nicht so erfahren wie funktoniert das dann mit z.B grid?

FaTech

09.09.2021, 11:03

@siljalul

Grid verstehe ich selber nicht so. Ich finde Flex ist leichter und funktioniert bisher so, dass ich kein Grid brauchte. Einfach mal Googlen nach: CSS Flex

ThEchion

09.09.2021, 11:11

in HTML kannst du vielleicht mit <center> "Dein Text und Kasten" </center>

<p align=“center“> "Dein Text und Kasten" </p>

probiere beides aus, ich bin mir nicht mehr sicher ob das so richtig ist aber einen versuch ist es wert

siljalul

Fragesteller

09.09.2021, 11:19

Das Obere hat funktoniert vielen Dank!

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

CSS display inline block und text align center nicht gleizeitig kompatibel?

Guten tag.

Ich erstelle grade eine website aber ich habe ein problem nämlich möchte ich die Überschrift in die Mitte verschieben was ja eigentlich mit text align center möglich ist.

Wenn ich dies aber machen möchte funktioniert es aber auch nur so lange wie ich Display inline block nicht mit rein nehme um die Hintergrundfarbe der Überschrift im Schach zu halten.

mein frage ist wie ich es hin bekomme das die Überschrift in der Mitte und die Hintergrund Farbe auch nur hinter der Überschrift bleibt.

...zur Frage

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?

...zur Frage

Den ganzen Hintergrund als Farbverlauf machen im Css?

Ich bin gerade dabei meine Webseite ein wenig zu gestalten und wollte im Hintergrund einen Farbverlauf machen. Wenn ich das mache hat es aber auf der ganzen Seite mehrere kleine Verläufe wie bring es dazu nur einen Grossen zu machen?

...zur Frage

CSS Text Mittig ausrichten trotz max-width?

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

Wie Text in einem Flex Element unterschiedlich positionieren?

Hallo zusammen! Ich habe ein Parent Element mit einem Child Element drinnen. Das Childelement besteht aus einer h3 Überschrift und einer h5 Überschrift. Die h3 Überschrift soll zentriert sein, als irgendwas mit center. Die h5 Überschrift hingegen soll am linken Rand stehen. Wie bekomme ich das mit Flex Box hin? Mit justify-content: center; habe ich beides in die Mitte bekommen, aber ich möchte ja nur eins...

MfG Lass228

...zur Frage

Html CSS Überschrift ausrichten?

Hallo,

ich habe in einer Zeile sowohl Button, als auch eine Überschrift. Wie kann ich die Button links lassen, die Überschrift aber in die Mitte ziehen? Denke das erklärt schon alles, ansonsten fragen.

Zweite frage:

Wie richte ich das Bild so aus, dass es über die gesamte Webseite reicht? Width 100% hat nicht funktioniert.

...zur Frage

CSS Hintergrund von Text separat bewegen?

Ich gestalte eine Webseite mit Elementen, die sich überlappen. Das setze ich mit Flexbox um. Ich habe zwei Texte, die nebeneinander liegen. Die Texte haben jeweils einen farbigen Kreis als Hintergrund. Die Kreise sollen sich an den Kanten überlappen, der Text jedoch nicht.

Kann ich es irgendwie umsetzen, dass der Text auf den Kreisen liegt und ich die Kreise darunter separat bewegen kann, ohne dass der Text sich mit bewegt? Und ohne position:absolute zu nutzen?

...zur Frage

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zur Frage

html css links und rechts gif/bild und in der mitte text?

ich mache gerade eine seite kenne mich noch nicht soo gut aus und wollte fragen wie man links und rechts ein gif oder bild machen kann und in der mitte einen text mache den text mit <center></center> in die mitte deswegen kann ich den gift oder das bild nicht daneben sonder nur darunter machen, kann mir jemand helfen?

...zur Frage

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

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

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

Was möchtest Du wissen?

Deine Frage stellen