Bilder im Container zentrieren

Charmin

Guten Abend liebe Community,

ich möchte im Aside (rechte Seite) die Bilder zentrieren, ich habe schon einiges ausprobiert aber irgendwas stimmt nicht

HTML

<!doctype HTML>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <title>Puschelreich - Maine Coon Zucht in Brandenburg in der Nähe bei Senftenberg</title>
      <meta name="description" content="Maine Coon Zucht aus Annahütte. Hier erfahren Sie alles über unsere reinrassige Zucht der Maine Coon, Kittenkauf, jede menge Bilder.">
      <meta name="author" content="Puschelreich - Monique Sommer, David Jähnel">
      <meta name="keywords" content="Maine Coon, Kitten, Maine Coon Zucht, Katzenzucht, Katzenbilder, Katzenbabys">
      <link href="design.css" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      
<!--[if IE]>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
></script>
<![endif]-->
      
      </head>
      
      <body>
          <div id="wrapper">
<header>
    <!-- Kopfzeile -->
</header>

<nav id="steuerungoben">
    <ul>
      <li><a href="index.htm">Startseite</a></li>
      <li><a href="puschels/kitten/index.html">aktuelle Würfe</a></li>
      <li><a href="aktuelle%20news/index.html">Neuigkeiten</a></li>
      <li><a href="Kontakt.html">Kontakt</a></li>
    </ul>
  </nav>

            <div class="flex-container">
  <nav id="steuerunglinks">
    <ul>

<li><a href="index.html">Startseite</a></li>
<li><a href="puschels/index.html">Puschels</a></li>
<li><a href="bilder.html">Bilder</a></li>
<li><a href="über%20uns%20dosenöffner.html">Über uns Dosenöffner</a></li>
<li><a href="https://www.puschelreich.de/infos/index.html">Infos</a></li> 
<li><a href="https://www.puschelreich.de/aktuelle%20news/index.html">Neuigkeiten</a></li>
<li><a href="https://www.puschelreich.de/katzenblog/index.html">Katzenblog</a></li>
<li><a href="https://www.puschelreich.de/Kontakt.html">Kontakt</a></li>

</ul>
</nav>
            
              <section>
    <h1>Puschelreich - Maine Coon Zucht</h1>
    
    <p id="starkeschrift">Herzlich Willkommen!</p>
    
<p>Wir sind eine kleine Zucht der Rasse Maine Coon aus Annahütte im Bundesland
    Brandenburg. Unsere Zucht gestalten wir transparent und wollen Euch
    liebe Leser und Beobachter im Reich der Puschels verführen.
</p>
    <p>Wir wünschen viel Spaß beim stöbern auf unserer Homepage :) 
    Bei Fragen können Sie uns jederzeit kontaktieren.</p>
     
    <p>Auch Züchterfreunde sind bei uns immer herzlich willkommen.</p>
    
    <hr />
        </section>

<aside>
<p>
<img src="Highlight/1.jpg" width="155" height="116" alt="Highlight" title="Highlight">
<img src="Highlight/2.jpg" width="155" height="116" alt="Highlight" title="Highlight">
<img src="Highlight/3.jpg" width="155" height="116" alt="Highlight" title="Highlight">
<a href="https://www.premiumpetshop.de/Premium-Petshop-praesentiert-Top-Katzenblogs"><img width="180" 
    src="https://www.premiumpetshop.de/mediafiles/Bilder/top-katzenblog-2018.png" alt="Premiumpetshop stellt Top Katzenblogs 2018 vor" title="Premiumpetshop stellt Top Katzenblogs 2018  
    vor"></a>
<a href="https://www.pawpeds.com/pawacademy/courses/g1/g1students_de.html">
    <img src="Pawpeds/G1.png" width="100" height="200" alt="Pawpeds G1" title="Pawpeds G1"></a>
<a href="https://www.pawpeds.com/pawacademy/courses/g2/g2students_de.html">
    <img src="Pawpeds/G2RibbonSmall.gif" width="100" height="200" alt="Pawpeds G2" title="Pawpeds G2"></a>

</p>
</aside>


            </div>


<footer>
Printerest
Teilen
Startseite
Impressum
Kontakt
Maine Coon Züchter Berlin Brandenburg Dresden
Unser Verein
Katzenblog
</footer>
</div>
      </body>
</html>

Alles anzeigen

Code

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    background-image: url(onewebmedia/Hintergrund2.jpeg);
    background-attachment: fixed;
    font-family: Arial, sans-serif;
}

header, footer {
    flex: 1 100%; 
}

section {
    flex: 3;
}

aside {
    flex: 1;
}

header {
    /* background-color: yellow; */
    background-image: url(Homepage/Shadow.jpg);
    height: 200px;
}

header p {
    /* background-color: orange; */
    text-align: right;
    padding: 15px;
}

#steuerungoben {
    /* background-color: red; */
    -ms-flex-direction: column;
    flex-direction: column;
    background-image: url(Bilder/hintergund-grey.png);
    
}

#steuerungoben ul {
    display: flex;
    list-style-type: none;
}

#steuerungoben li {
    display: flex;
}

#steuerungoben a {
   display: block;
   width: 15em;
   /* background-color: yellow;*/
   /*float: left;*/ 
   /* border-right: 1px red solid; */
    color: white;
    text-decoration: none;
    line-height: 24px;
    text-align: center

}

#steuerungoben a:hover {
    background-image: url(Bilder/hintergrund-black.png);
    
}

.flex-container {
  display:flex
}

#steuerunglinks {
   /* background-color: green; */
   width: 250px;
}

#steuerunglinks ul {
    padding-left: 1em;
    padding-top: 20px;
    list-style-type: none
      
    
}

#steuerunglinks a {
    color: #dd9661;
    line-height: 30px;
}

aside {
   background-color: #808000;
    width: 175px;
}

aside p {
    display: block;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    
}

section {
   /* background-color: orange; */
  
}

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    color: #dd9661;
}

section h2 {
    color: #dd9661;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section p {
    padding-bottom: 1em;
}

#starkeschrift {
    font-weight: bold;
}

footer {
    background-color: brown;
    background-image: url(Bilder/hintergund-grey.png);
    text-align: center;
    color: white;
    clear: both;
}

#wrapper {
   /* background-color: #eeeeee; */
    width: 60em;
    margin: 0 auto;
    text-align: left;
    background-image: url(hintergrund-durch.png);
}

Alles anzeigen

Vielen Dank für Eure Hilfe.

Beste Grüße

basti1012

So?

Code

aside p{
    display:flex;
    flex-direction:column;
    align-content: center;
    align-items: center;
}

Kannst aber das p eigentlich auch entfernen, wenn du das <p> auch aus den<aside> raus nimmst .Ich sehe da kein sinn bis jetzt das du da ein <p> Nutzt

Charmin

Ja genau, das p habe ich jetzt raus, das war noch drin weil ich vor ein paar Tagen Textinhalte drin hatte.

Jetzt kann ich aber nicht mehr mit Margin arbeiten, im Prinzip brauche ich noch ein Befehl für den Randabstand und

der Abstand zwischen die Bilder.

basti1012

Kuck mal hier

http://the-echoplex.net/flexyboxes/

Da kannst du testen wie du es haben möchtest und dann wird dir der richtige Code angezeigt

Du wirst wahrscheinlich was mit space-arround brauchen

Charmin

Also nach deiner Anleitung her, sollte es space arround machen allerdings tut sich nichts, es liegt einfach daran das

halt kein Platz mehr vorhanden ist um alles zu zentrieren.

Jetzt wäre die Frage, wie ich den Randabstand bestimmen kann sowie die Anstände zwischen die Bilder?

Sempervivum

Zitat

es liegt einfach daran das

halt kein Platz mehr vorhanden ist um alles zu zentrieren.

Das trifft zu, justify-content kann nur wirken, wenn freier Raum vorhanden ist.

Aber warum bist Du denn der Meinung, dass Du jetzt nicht mehr mit margin arbeiten kannst? Dieses funktioniert einwandfrei, um vertikalen Abstand zwischen den Bildern herzustellen:

Code

        aside {
            background-color: #808000;
            width: 175px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        aside>img,
        aside>a {
            margin-top: 20px;
        }

Alles anzeigen

(p-Element wurde entfernt).

Charmin

Genau, das hatte ich gesucht, kannte nur den Befehl nicht

Vielen Dank dafür.

Sempervivum

Mit Margins und Flex kann man noch viel mehr machen:

https://stackoverflow.com/questions/3255…856609#33856609

Bilder im Container zentrieren

Jetzt mitmachen!

Tags