छवियों की केंद्रित पंक्ति प्रदर्शित करें

Question

मेरे पास तीन छवियों की एक पंक्ति है जो वर्तमान में ठीक दिख रही हैं।

अब, मैं उन तीनों के ठीक नीचे दो और छवियां प्रदर्शित करना चाहता हूं और मैं उन्हें केंद्रित करना चाहता हूं (यह एक उल्टा पिरामिड की तरह दिखता है)।

कोई फर्क नहीं पड़ता कि मैं क्या करता हूं, नीचे पंक्ति पंक्तिबद्ध रहती है।

<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> 

यहाँ है क्या तुम मूल तीन देख सकते हैं::

यहाँ .css

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

यहाँ के एचटीएमएल है http://www.neighborhoodwatchalerts.com/

क्योंकि मैं दिखाने के लिए परीक्षण पृष्ठ चाहते हैं खोज इंजन में आप उपर्युक्त यूआरएल ले सकते हैं और इसमें index2.php जोड़ सकते हैं और सभी 5 छवियां देख सकते हैं।

किसी भी सुझाव की सराहना की जाएगी!

Answer 1

यदि आप display:inline-block की सीएसएस संपत्ति रखने के लिए अपनी श्रेणी divs सेट करते हैं, तो वे कंटेनर के text-align: center नियम का पालन करेंगे।
here's a fiddle

मार्कअप उदाहरण

<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; 
} 

Answer 2

ऐसा करने का एक तेज़ तरीका नीचे div एस div और margin: 0 auto; का उपयोग कर केंद्र को नीचे लपेटता है।

तो जैसे

<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> 

सीएसएस कुछ

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

FYI करें ... margin में 0 दो पंक्तियों बहुत करीब लाने सकता है। आपको समायोजित करने की आवश्यकता हो सकती है।