[GELOEST] Benötige hilfe bei anordung und zentrierung

[Ch3fK0cH]

Guten Morgen HTML.de - Community,

Ich stehe nun wieder mal vor einem Problem was ich nicht gelöst bekomme.
Und zwar habe ich vor wie bei diesem Screenshot zu sehen die 5 Spieler nebeneinander Zentriert in dem roten Feld was ich dort markiert habe anzeigen zu lassen.
Nur leider bekomme ich das nicht hin, ich habe schon einige dinge ausprobiert mit text-alighn, align.items und float left etc aber irgendwas scheint falsch zu sein oder noch zu fehlen.
daher meine Frage ob mir vielleicht jemand sagen kann was ich falsch mache oder was noch fehlt damit es funktioniert.

Hier habe ich euch ein Screenshot und weiter unten mein HTML und CSS Inhalt als Spoiler hinzugefügt.

Danke für eure Zeit und Hilfsbereitschaft.

mfg

Steven K.

Screenshot:

HTML Inhalt des Team Roosters:

<section class="rooster">
<div class="standard-container">
<div class="slogan-gameicon">
<div class="slogan"><h2><span class="text-highlighted-bold">SG PLAYERS</span></h2></div>
<div class="gameicon"><img src="/img/cs2logo.png" alt=""></div>
</div>


<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
<div class="player">
<img src="img/player/noicon2.png" alt="">
<h2>Leon "Gedwer24" Hartmut</h2>
</div>
</div>
</section>

CSS Inhalt des Team Roosters + standard-container:

/* HILFSKLASSEN */
.standard-container {
max-width: 1080px;
margin: 0 auto;
}


/* team rooster slogen Content*/
.rooster {
background-color: #3d3d3d;
width: 100%;
margin: 0 auto;
}
.rooster:after {
content: "";
display: block;
clear: both;
}
.slogan-gameicon {
width: 100%;
padding-top: 50px;
padding-bottom: 20px;
}
.slogan-gameicon:after {
content: "";
display: block;
clear: both;
}
.slogan {
float: left;
padding: 8px 0px 0px 20px;
}
.gameicon {
float: left;
padding-left: 40px;
}
.gameicon img {
width: 20%;
}

.player {
width: 16%;
margin: 1%;
padding: 1%;
}

.player img {
width: 100%;
}

 

[msi]

ich habe schon einige dinge ausprobiert mit text-alighn, align.items und float left etc

Hättest du es mal mit Flex-Box probiert

Siehe

A Complete Guide to Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser...

css-tricks.com

CSS Flexbox (Flexible Box)

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

CSS Flexbox – Einführung und Überblick

Mit Flexbox könnt ihr unkompliziert variable und responsive Layouts erzeugen. Das Modell arbeitet mit zwei Achsen auf denen Inhalte verteilt werden können. Daher bietet sich die CSS Flexbox besonders für lineare Strukturen an.

kulturbanause.de

Flexy Boxes — CSS flexbox playground and code generation tool

Online CSS flexbox playground and code generator. Supports all existing flexbox implementations.

the-echoplex.net

 

[Ch3fK0cH]

ah nein siehste danke probiere ich gleich mal aus

 

[msi]

Ungefähr so:

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: center;
    }

.flex-item {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

<div class="flex-container">
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
  <div class="flex-item">
    <img src="img/player/noicon2.png" alt="">
    <h2>Leon "Gedwer24" Hartmut</h2>
  </div>
</div>

Hiermit zusammengeklickt: https://the-echoplex.net/flexyboxes/?fixed-height=on&display=flex&flex-direction=row&flex-wrap=wrap&justify-content=space-between&align-items=center&align-content=flex-start&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto

Und noch ein Tipp: rücke deinen Code vernünftig ein, wie du bei mir siehst, ist das deutlich besser zu lesen.

 

[Sempervivum]

Noch ein Hinweis von meiner Seite: Hier würde sich die Verwendung des figure-Tags anbieten.

 

[Ch3fK0cH]

und was genau ist figure-tags? habe das noch nie gehört, bin erst seit ca. 3 wochen dabei mir html und css beizubringen

 

[Sempervivum]

Siehe z. B. hier:

HTML figure Tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[msi]

und was genau ist figure-tags?

Tante google hätte dir dabei auch weitergeholfen.

 

[Sempervivum]

Es gibt noch eine ganze Reihe weitere solcher semantischer Tags, siehe z. B. hier:

Semantische Elemente in HTML5

Die semantischen Elemente werden für die Strukturierung, Gruppierung und der Markierung des Textinhalts verwendet.

de.w3docs.com