отображать центрированный ряд изображений - PullRequest
Новая
       28

отображать центрированный ряд изображений

7 голосов
/ 02 сентября 2011

У меня есть ряд из трех изображений, которые в настоящее время отображаются очень хорошо.

Теперь я хочу отобразить еще два изображения прямо под этими тремя, и я хочу, чтобы они были в центре (это было бы похоже на перевернутыйпирамида).

Что бы я ни делал, нижний ряд остается выровненным влево.

Вот .css 

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

Вот HTML: 

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

Здесь вы можете увидеть исходные три: http://www.neighborhoodwatchalerts.com/

Поскольку я не хочу, чтобы тестовая страница отображалась в поисковых системах, вы можете взять вышеуказанный URL-адрес и добавить на него index2.php ипосмотреть все 5 изображений.

Любые предложения будут оценены!

Ответы [ 2 ]

17 голосов
/ 02 сентября 2011

Если вы установили для div вашей категории свойство css display:inline-block, они будут подчиняться правилу text-align: center контейнера.
вот скрипка

Пример разметки 

<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;
}
0 голосов
/ 02 сентября 2011

Один быстрый способ сделать это - обернуть два нижних div s в другой 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>

css 

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

К вашему сведению ... 0 в margin может сблизить два ряда слишком близко.Возможно, вам придется настроить.

...