Anzeige ZENTRIERT Reihe von Bildern

Habe ich eine Reihe von drei Bildern, die derzeit angezeigt wird, einfach nur gut.

Nun, ich möchte zeigen zwei weitere Bilder, rechts unten die drei und ich möchte, dass Sie zentriert ist (es würde ein bisschen so Aussehen wie eine Umgedrehte Pyramide).

Egal was ich mache, die untere Zeile bleibt Linksbündig.

Hier ist die .css

.category
{
 width:176px; 
 font-size:80%; 
 text-align:center;
 float:left;
 position:relative;
}

Hier die html-Ausgabe:

 <div style='width:95%; align:center'>
 <div class='category'><a href='individual.php'><img src='images/individual.jpg' style="padding-bottom:0.0em;" border='0' alt='Individual Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
 <b>Individuals</b></div>        
 <div class='category'><a href='community.php'><img src='images/community.jpg' style="padding-bottom:0.0em;" border='0' alt='Community based Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
 <b>Communities</b></div>        
 <div class='category'><a href='/police'><img src='images/first_respond.jpg' style="padding-bottom:0.0em;" border='0' alt='Police and send Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
 <b>Fire/Police</b></div>
 <br>
 <div class='category'><a href='business.php'><img src='images/business.jpg' border='0' alt='Electronic Crime Watch Alerts by Email and Text Messaging for Businesses'></a>
 <b>Businesses</b></div>        
 <div class='category'><a href='utility.php'><img src='images/utility.jpg' border='0' alt='Phone, Cable, Water, Gas and Power Outage Alerts'></a>
 <b>Utilities</b></div>
 </div>

Hier waren, können Sie sehen die ursprünglichen drei: http://www.neighborhoodwatchalerts.com/

Weil ich nicht wollen, dass die test-Seite zu zeigen, bis in Suchmaschinen können Sie die oben genannte URL, und fügen Sie index2.php auf es und siehe alle 5 Bilder.

Anregungen wäre dankbar!

InformationsquelleAutor ppetree | 2011-09-02

  1. 16

    Wenn Sie Ihre Kategorie divs mit der css-Eigenschaft display:inline-block Sie halten sich an die text-align: center Regel der container.

    hier ist ein Turnschuh

    Markup-Beispiel

    <div class="container">
    <div class="category"></div>
    <div class="category"></div>
    <div class="category"></div>
    <br/>
    <div class="category"></div>
    <div class="category"></div>
</div>

    Css

    .container{
    border: 1px solid #ccc;
    text-align: center;
}
.category{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #ccc;
    margin: 5px;
}
    Ich war gerade in der post das gleiche. Ich würde sicherstellen, dass, um dies zu testen, auf ältere IE-Browser. Ich glaube, dass zumindest der IE6 & IE7 nicht erkennen "inline-block" und zeigt diese als "block", was bedeutet, werden Sie wahrscheinlich zeigen sich als vertikale Spalte statt Zeile. Sie sollten in der Lage sein, um das zu beheben, indem die "float" in ".Kategorie" aber ich glaube, Sie verlieren die center-Ausrichtung, die Sie wünschen. Wenn IE6/7 ist wichtig, um Ihnen dann eine Lösung wie Jason Gennaro gepostet werden können, am besten.

    InformationsquelleAutor meouw

  2. 0

    Einen schnellen Weg, es zu tun ist, wickeln Sie die unteren zwei divs in einem anderen div - und center, die mit margin: 0 auto;.

    So etwas wie

    <div id="somethingWrapper">

      <div class='category'><a href='business.php'>
      <img src='images/business.jpg' border='0' alt='yada'></a>
      <b>Businesses</b></div>        

      <div class='category'><a href='utility.php'>
      <img src='images/utility.jpg' border='0' alt='yadayada'></a>
      <b>Utilities</b></div>

</div>

    css

    #somethingWrapper{
    width:352px; //or something close
    margin:0 auto; 
}

    Fyi... die 0 im margin bringen könnte, die zwei Reihen zu schließen. Sie kann sich anpassen müssen.

    Vielen Dank für dieses jason!
    Gerne helfen @ppetree!

    InformationsquelleAutor Jason Gennaro

Schreibe einen Kommentar