Zentrieren eines Behälters von 3 Schwimmer divs nach links

Ich habe 3 divs (headcol1, headcol2 und headcol3) schwebte nach links:Zentrieren eines Behälters von 3 Schwimmer divs nach links

Wie zentriere ich diese drei Elemente ohne padding-left oder margin-left mit in ihrem Behälter? Das Ergebnis aussehen würde wie folgt vor:

<html> 
<div class="fivestar"> 
    <div class="row"> 
     <div class="headcol1"> 
      <p><span>FOLLOW US</span></p> 
      <p> 
       <a href="<?php $this->info(" fb_link ") ?>" target="_blank">F</a> 
       <a href="<?php $this->info(" tt_link ") ?>" target="_blank">G</a> 
       <a href="<?php $this->info(" yt_link ") ?>" target="_blank">L</a> 
       <a href="<?php $this->info(" yt_link ") ?>" target="_blank">I</a> 
       <a href="<?php $this->info(" yt_link ") ?>" target="_blank">X</a> 
      </p> 
     </div> 
     <div class="headcol2"> 
      <img src="public/images/common/starlogo.png"> 
     </div> 
     <div class="headcol3"> 
      <p><span>PHONE NO:</span></p> 
      <p class="nums"> 
       <?php $this->info(["phone"]);?> 
      </p> 
      <hr width="120px"> 
      <p class="nums"> 
       <?php $this->info(["phone"]);?> 
      </p> 
     </div> 
    </div> 
</div> 
<html> 

<style> 
    #header .fivestar { 
     margin: 0 auto; 
     padding-top: 15px; 
    } 

    #header .fivestar .headcol1 { 
     float: left; 
     border: 1px solid black; 
     width: auto; 
    } 

    #header .fivestar span { 
     font-family: 'myriad'; 
     font-size: 1em; 
     color: #F24033; 
    } 

    #header .fivestar .headcol1 p a { 
     font-family: 'socialicoregular'; 
     font- size: 2em; 
     color: #999999; 
     letter-spacing: 15px 
    } 

    #header .fivestar .headcol1 p a:hover { 
     color: #AC0000; 
    } 

    #header .fivestar .headcol2 { 
     float: left; 
     border: 1px solid black; 
     padding: 0px 80px 0px 80px; 
    } 

    #header .fivestar .headcol3 { 
     float: left; 
     border: 1px solid black; 
     width: auto; 
    } 

    #header .fivestar .headcol3 .nums { 
     font-family: 'RobotoSlab', serif; 
     color: #555555; 
     font-size: 1.250em; 
     font- weight: bold; 
     margin: 0px; 
     padding: 0px; 
    } 

    #header .fivestar .headcol3 hr { 
     margin: 0px; 
     padding: 0px; 
    } 
</style>

Quelle

2017-05-30 Charlese Virility

pls Hilfe. Danke :) –

Bitte fügen Sie Ihren Code hinzu. Und wenn möglich auch eine Demo. Wir können Ihnen auf keinen Fall mit den von Ihnen zur Verfügung gestellten Informationen helfen. –

Hier ein Beispiel:

.container { 
 
    width: 300px; /* for demo purpose */ 
 
    text-align: center; 
 
    background-color: green; 
 
} 
 
.element { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color:red; 
 
    border: thin solid black; 
 
    display: inline-block; 
 
}

<div class='container'> 
 
<div class='element'></div> 
 
<div class='element'></div> 
 
<div class='element'></div> 
 
</div>

Quelle

2017-05-30 11:02:47 Gerard

Sie haben vergessen, dass die Elemente nach links verschoben sind. Verwenden von margin: 0 auto: Für einen Container wird es aber reichen. –

Aber ich dachte Rand war nicht erlaubt :) Vielleicht nur margin-left eh – Gerard

Er meinte, dass er nicht so etwas wie margin-left verwenden möchte: 300px; oder padding-left: 300px; 'margin: 0 auto;' wird automatisch und auch nicht für nur eine Bildschirmgröße zentriert. –

-1

Diese Frage könnte Ihnen helfen:How to center floating divs?

Das Bild, das du gepostet hast, funktioniert nicht, aber soweit ich weiß, musst du noch eine Art Polsterung oder Rand haben, damit deine divs einander nicht berühren. Sie können diese Zahl zu einem% machen, so dass das Layout ungeachtet der Größe des Containers <div> reaktionsfähig bleibt.

Quelle

2017-05-30 11:03:48 April

Ein Kollege sagte mir, col1 nach links und col3 nach rechts zu schweben und position: absolut für das Bild in der Mitte zu verwenden; Ich habe noch nicht versucht, was er empfohlen hat, aber es wird meine endgültige Lösung sein, wenn es keine andere Möglichkeit gibt, dies zu tun. –

Ich schaffte es, die Lösung selbst zu finden.

Ich verwendete Anzeige: Inline-Block und aber Col1 und Col2 ging nach unten, Und ich verstehe nicht, warum, aber ich verwendete vertikal: align-top, um sie aufzustellen.

vor https://i.stack.imgur.com/9CVzo.jpg

nach https://i.stack.imgur.com/AdMHK.jpg

Quelle

2017-06-01 05:15:21

Zentrieren eines Behälters von 3 Schwimmer divs nach links

Antwort

Verwandte Themen