Wie bekomme ich die Kopfzeile in der Mitte der Seite?

Ich versuche, die Kopfzeile und Bilder darunter in der Mitte der Seite zu bekommen, aber ich habe viel Mühe herauszufinden, wie das geht. Versucht das Boxmodell ohne Glück zu manipulieren. Ich bin wirklich neu in diesem Zeug, also hilft jeder Rat.Wie bekomme ich die Kopfzeile in der Mitte der Seite?

body { 
 
    background: radial-gradient(gold, goldenrod); 
 
    font-family: monospace; 
 
    text-align: center; 
 
    font-size: 1.5rem; 
 
    position: relative; 
 
} 
 

 
img { 
 
    padding: 10px; 
 
} 
 

 
img:hover { 
 
    transform: scale(1.4); 
 
    transition:all 1s; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    min-height: 400px; 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <h1>Choose Your Weapon</h1> 
 
    <div class="container"> 
 
     <img src="images/rock.svg" alt="rock"> 
 
     <img src="images/paper.svg" alt="paper"> 
 
     <img src="images/scissors.svg" alt="scissors"> 
 
     <p></p> 
 

 
    </div> 
 
    <script src="app.js"></script> 
 
    </body> 
 
</html>

Quelle

2017-08-16 user8473431

Ich denke, Ihr Problem wurde hier beantwortet: https://StackOverflow.com/Questions/2014920 6/how-to-center-a-Kopfzeilenbild –

Sie flexbox für dieses

body { 
 
    height: 100vh; 
 
    background: radial-gradient(gold, goldenrod); 
 
    font-family: monospace; 
 
    font-size: 1.5rem; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 

 
img { 
 
    padding: 10px; 
 
} 
 

 
img:hover { 
 
    transform: scale(1.4); 
 
    transition: all 1s; 
 
}

<h1>Choose Your Weapon</h1> 
 
<div class="container"> 
 
    <img src="images/rock.svg" alt="rock"> 
 
    <img src="images/paper.svg" alt="paper"> 
 
    <img src="images/scissors.svg" alt="scissors"> 
 
    <p></p> 
 

 
</div>

Quelle

2017-08-16 15:36:28 sol

Versuchen Sie so verwenden könnte mething wie folgt aus:

body { 
 
    background: radial-gradient(gold, goldenrod); 
 
    font-family: monospace; 
 
    text-align: center; 
 
    font-size: 1.5rem; 
 
    position: relative; 
 
} 
 

 
img { 
 
    padding: 10px; 
 
} 
 

 
img:hover { 
 
    transform: scale(1.4); 
 
    transition: all 1s; 
 
} 
 

 
.container { 
 
    width: auto; 
 
    margin: auto; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <h1>Choose Your Weapon</h1> 
 
    <div class="container"> 
 
    <img src="images/rock.svg" alt="rock"> 
 
    <img src="images/paper.svg" alt="paper"> 
 
    <img src="images/scissors.svg" alt="scissors"> 
 
    <p></p> 
 

 
    </div> 
 
    <script src="app.js"></script> 
 
</body> 
 

 
</html>

Quelle

2017-08-16 15:37:55

Ausgabe ist positioning und Nutzung von Eigentum left, top die top text auch ausblenden, wenn Sie Bildschirmgröße reduzieren, sondern können es position-relative ist ändern und margin dann ausrichten verwenden, um das bei center der Seite,

body { 
 
    background: radial-gradient(gold, goldenrod); 
 
    font-family: monospace; 
 
    text-align: center; 
 
    font-size: 1.5rem; 
 
    position: relative; 
 
} 
 

 
img { 
 
    padding: 10px; 
 
} 
 

 
img:hover { 
 
    transform: scale(1.4); 
 
    transition: all 1s; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    min-height: 400px; 
 
    background: red; 
 
    margin: auto; 
 
    display: inline-block; 
 
}

<h1>Choose Your Weapon</h1> 
 
<div class="container"> 
 
    <img src="http://via.placeholder.com/100x100" alt="rock"> 
 
    <img src="http://via.placeholder.com/100x100" alt="paper"> 
 
    <img src="http://via.placeholder.com/100x100" alt="scissors"> 
 
    <p></p> 
 
</div>

Quelle

2017-08-16 15:43:25 frnt

In Ordnung, also kann das durch einen dreckigen kleinen Trick gemacht werden, den ich gelernt habe, als ich anfing. Bevor ich dazu komme, möchte ich einige Änderungen an Ihrem Code vornehmen:

A) Keine Einstellung position: relative; für Körper, weil alle Elemente automatisch in Bezug auf den Körper Ihrer Seite bewegen. Wenn Sie die Position auf relativ setzen, bedeutet dies, dass Sie das Positionselement von allem im Körper als relative einschränken. So wird es die absolute der .container Klasse ignorieren.

B) Zweitens, ich sehe keinen Grund, warum, wenn Sie den Header und die Bilder zusammenhalten wollen, Sie sie nicht unter einer einzigen Klasse halten. Es macht es einfacher, sie zusammen zu bewegen, anstatt sich einzeln zu bewegen.

Nun zum Trick, für den Anfang, benötigen Sie in Pixel die min-height und min-width der Container-Klasse zu setzen. Sobald Sie das getan haben, können Sie die Klasse in der mittleren Position von:

top: 50%; 
left:50%; 
margin-top: -200px; /*half of the height of the container*/ 
margin-left: -200px; /*half of the width of the container*/

So, jetzt Ihr Code, müssen alle so etwas wie dies zusammengefasst:

body { 
 
    background: radial-gradient(gold, goldenrod); 
 
    font-family: monospace; 
 
    text-align: center; 
 
    font-size: 1.5rem; 
 
} 
 

 
img { 
 
    padding: 10px; 
 
} 
 

 
img:hover { 
 
    transform: scale(1.4); 
 
    transition:all 1s; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    min-width: 400px; 
 
    min-height: 200px; 
 
    top:50%; 
 
    left: 50%; 
 
    margin-top: -100px; 
 
    margin-left: -200px; 
 
}

<body> 
 
    <div class="container"> 
 
    <h1>Choose Your Weapon</h1> 
 
    
 
     <img src="images/rock.svg" alt="rock"> 
 
     <img src="images/paper.svg" alt="paper"> 
 
     <img src="images/scissors.svg" alt="scissors"> 
 
     <p></p> 
 

 
    </div> 
 
    <script> 
 
    
 
    </script> 
 
    </body>

und raten Sie mal, es ist sogar ansprechend :)

Quelle

2017-08-16 17:30:08

Wie bekomme ich die Kopfzeile in der Mitte der Seite?

Antwort

Verwandte Themen