Text ist nebeneinander statt in zwei Zeilen CSS/HTML

Question

Ich versuche, meinen Lebenslauf als Webseite zu erstellen, und ich habe Probleme mit der Ausrichtung meiner H1 mit dem Menü (Tabelle). Sie sind in einer Linie nebeneinander, aber ich möchte, dass mein Tisch unter dem H1 steht. Hier ist der HTML:

<div class="uvod"> 
<h1>Name of the page</h1> 
</div> 
<div> 
    <ul class="uvod"> 
    <li><a href="">Home</a></li> 
    <li><a href="l">Introduction</a></li> 
    <li><a href="">CV</a></li> 
    <li><a href="">Galery</a></li> 
    <li><a href="">My work</a></li> 
    <li><a href="">Contact</a></li> 
</ul> 
</div> 

und hier die CSS:

.uvod { 
     height: 100%; 
     width: 100%; 
     display: flex; 
     position: fixed; 
     align-items: center; 
     justify-content: justify; 
     font-family: "Helvetica", sans-serif; 
     color: #F0F8FF; 
     text-transform: uppercase; 
     letter-spacing: 3px; 
} 

Vielen Dank

Answer 1

Haben Sie display: flex für einen Grund brauchen? Wenn nicht, benutze das folgende Snippet. Ich denke es ist das was du verlangst? Gib mir Bescheid.

.uvod { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    position: fixed; 
 
    font-family: "Helvetica", sans-serif; 
 
    color: #F0F8FF; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 

 
.uvod h1 { 
 
    text-align: center; 
 
} 
 

 
.uvod ul { 
 
    padding: 0; 
 
    list-style: none; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
li { 
 
    margin-right: 10px; 
 
} 
 

 
li:last-child { 
 
    margin-right: 0px; 
 
}

<div class="uvod"> 
 
    <h1>Name of the page</h1> 
 
    <ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="l">Introduction</a></li> 
 
    <li><a href="">CV</a></li> 
 
    <li><a href="">Galery</a></li> 
 
    <li><a href="">My work</a></li> 
 
    <li><a href="">Contact</a></li> 
 
    </ul> 
 
</div>

Answer 2

können Sie Flex-Richtung verwenden: 'Spalte' in css

und class = "uvod" sowohl für die divs statt ul gelten:

So etwas wie dies:

<div class="uvod"> 
<h1>Name of the page</h1> 
</div> 
<div class="uvod"> 
    <ul > 
    <li><a href="">Home</a></li> 
    <li><a href="l">Introduction</a></li> 
    <li><a href="">CV</a></li> 
    <li><a href="">Galery</a></li> 
    <li><a href="">My work</a></li> 
    <li><a href="">Contact</a></li> 
</ul> 
</div> 

Answer 3

ich werde zunächst einmal vorschlagen Sie verwenden position:relative und display:block

.uvod { 
    height: 100%; 
    width: 100%; 
    display: block; 
    position: relative; 
    align-items: center; 
    justify-content: justify; 
    font-family: "Helvetica", sans-serif; 
    color: #F0F8FF; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
} 

Siehe Beispiel hier ->https://jsfiddle.net/85em2hm0/

Answer 4

Ich bin nicht 100% sicher, was Sie das resultierende Layout zu erwarten. Wie auch immer, ich habe versucht, etwas Besseres für Sie zu finden.

Eigentlich brauchen Sie in diesem Fall überhaupt nicht flex (noch nicht). Was Sie brauchen, um Code zu reparieren, ist, dass Sie bei der Verwendung von flex in den meisten Fällen einen Container haben, der jeden Abschnitt darstellt und Elemente in diesen Container einfügt, und da Sie dieselbe Klasse .uvod zweimal verwendet haben, beide hatten dieselbe Stelle und überlappten sich. Eine Möglichkeit, dies zu beheben, war die Verwendung eines einzelnen Umwicklungs-Flex .uvod um die Tags h1 und ul. Und Hinzufügen von flex-flow:column zu dem Container.

Eine einfachere Möglichkeit ist, keinen Flex zu verwenden. Wenn Sie keine ausgefallene Ausrichtung und Positionierung benötigen, halten Sie einfach mit einfach display: block.

Werfen Sie einen Blick auf diese Geige mit den Korrekturen, die ich gesprochen habe. (Der kommentierte Code ist ein Fix für Ihre Version, und der andere ist eine Alternative, die flex nur verwendet, um die Zusammenfassung korrekt auszurichten).

/*  .uvod { 
 
     flex-flow: column; 
 
     height: 100%; 
 
     width: 100%; 
 
     display: flex; 
 
     position: fixed; 
 
     align-items: center; 
 
     justify-content: justify; 
 
     font-family: "Helvetica", sans-serif; 
 
     color: #F0F8FF; 
 
     text-transform: uppercase; 
 
     letter-spacing: 3px; 
 
    } 
 
     */ 
 
    body { 
 
     font-family: "Helvetica", sans-serif; 
 
    } 
 
     
 
    .title { 
 
     text-transform: uppercase; 
 
     letter-spacing: 3px; 
 
     text-align: center; 
 
     /* color: #F0F8FF; */ 
 
    } 
 
     
 
    .section { 
 
     width: 100%: 
 
     margin-bottom: 10px; 
 
    } 
 
     
 
    .summary-wrapper { 
 
     display: flex; 
 
     align-items: center; 
 
     justify-content: center; 
 
    } 
 
     
 
    .summary { 
 
     list-style: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     text-transform: uppercase; 
 
     letter-spacing: 3px; 
 
    } 
 
    
 

<!-- <div class="uvod"> 
 
    <h1>Name of the page</h1> 
 
    <ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="l">Introduction</a></li> 
 
    <li><a href="">CV</a></li> 
 
    <li><a href="">Galery</a></li> 
 
    <li><a href="">My work</a></li> 
 
    <li><a href="">Contact</a></li> 
 
    </ul> 
 
</div> --> 
 

 
<!-- Alternative --> 
 
<h1 class="title">Name of the page</h1> 
 
<div class="section summary-wrapper"> 
 
    <ul class="summary"> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">Introduction</a></li> 
 
    <li><a href="">CV</a></li> 
 
    <li><a href="">Galery</a></li> 
 
    <li><a href="">My work</a></li> 
 
    <li><a href="">Contact</a></li> 
 
    </ul> 
 
</div>

Answer 5

Ich habe eine new class für die <ul>. In diesem Beispiel wird flex nicht verwendet. Die .uvod div hat eine fixed position und top:50%;. Alles, was jetzt benötigt wird, ist ein negative top margin to center it einzustellen.

Um die .uvod div perfekt in der Mitte vertikal zu zentrieren, müssten Sie die Höhe des div kennen, dann geben Sie einen negativen oberen Rand von half its height in px.

Zum Beispiel, wenn die .uvod divheight:400px hatte, dann würden Sie margin-top:-200px; schreiben. Hier

ist der Code, das Snippet am Boden laufen und überprüfen this working fiddle mit dem gleichen Code, so dass Sie auf einem größeren Hintergrund testen können:

.uvod 
 
{ 
 
    position: fixed; 
 
    top:50%; 
 
    margin-top:-50.5px; 
 
    width: 100%; 
 
    display: block; 
 
    text-align: center; 
 
    font-family: "Helvetica", sans-serif; 
 
    color: #F0F8FF; 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
} 
 

 
h1 
 
{ 
 
    position:relative; 
 
    float:left; 
 
    width:100%; 
 
    display:block; 
 
    text-align:center; 
 
} 
 

 
.uvodUL 
 
{ 
 
    position:relative; 
 
    margin:0 auto; 
 
    display:inline-block; 
 
    list-style-type:none; 
 
} 
 

 
.uvodUL li 
 
{ 
 
    position:relative; 
 
    float:left; 
 
    margin-right:5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Title of the document</title> 
 
</head> 
 

 
<body> 
 
<div class="uvod"> 
 
<h1>Name of the page</h1> 
 
<ul class="uvodUL"> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="l">Introduction</a></li> 
 
    <li><a href="">CV</a></li> 
 
    <li><a href="">Galery</a></li> 
 
    <li><a href="">My work</a></li> 
 
    <li><a href="">Contact</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 

 
</html>

Hinweis: Wenn Sie kenne die Höhe vorher nicht, dann kannst du percentages % (Prozentsatz der Elternhöhe - in diesem Fall die Höhe des Dokumentkörpers) verwenden. Wenn Sie den Wert anpassen müssen, können Sie media queries für different resolutions ändern.