HTML Div-Tags keine separaten divs Bilder

Question

Ich habe dieses Bild

Der Plan ist, um das Linkedin Symbol unter jedem gelben Bild in der Mitte zuweisen arbeiten. Hier ist der Code:

<div class="contentEditableContainer contentGmapEditable" style="min-height: 0px;"> 

    <div class="contentEditable"> 

<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<br> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;">                    </div>                      </div> 

Das Problem ist, ich habe für diese separate Divisionen versucht zu schaffen, wie:

<div class="col-md-12"> 
    <div class="col-md-2"> 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
                <br> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
               </div> 
<div class="col-md-2"> 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
                <br> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
               </div> 
               </div> 

In meinem Denken sollte es getrennte divs für beide Bilder erstellen und die <br> sollte es ermöglichen, linkedin-Symbol unter dem gelben sein. Es funktioniert nicht, es schafft vielmehr so:

bin ich etwas fehlt?

Answer 1

Probieren Sie es so etwas wie dieses

.d1{ 
 
    float:left; 
 
} 
 
.d2{ 
 
    float:right; 
 
} 
 
.li{ 
 
    text-align:center; 
 
}

<div class="col-md-12"> 
 
    <div class="col-md-2 d1"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
     <div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div> 
 
<div class="col-md-2 d1"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div> 
 
<div class="col-md-2 d1"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div> 
 
<div class="col-md-2 d2"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div>      
 
<div class="col-md-2 d2"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div> 
 
<div class="col-md-2 d2"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div>             
 
               </div>

Answer 2

try Bilder in der Mitte auszurichten und div,

<div class="col-md-12" style="display:inline-block;"> 
    <div class="col-md-2" style="text-align: center;"> 
     <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
     <br> 
     <img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
    </div> 
    <div class="col-md-2" style="text-align: center;"> 
     <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
     <br> 
     <img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
    </div> 
</div> 

Answer 3

So richten Sie links display:inline-block; ODER float:left zu verwenden, ich habe das obere Bild in einer Reihe mit zwei Spalten in jedem und in einem anderen in Bild verknüpft setzen Reihe, auch mit 2 Spalten.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="row text-center"> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
<div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
</div> 
 

 
<div class="row text-center"> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
<div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
</div>

Sie benötigen würden Sie Ihre eigenen Bilder in dort zu setzen, dann ist dies nur Platzhalter. Habe Spaß!