Центрирование и интеграция галереи изображений

Вопрос для HTML/CSS для вас.Центрирование и интеграция галереи изображений

Я застрял на этом некоторое время. Я ищу центр моей галереи изображений, а также упрощаю добавление между изображениями. Я думаю, что мне нужен контейнер, но я только что прикрутил все, когда пытаюсь. Любая помощь будет замечательной!

<div id="container" align="center"> 
<div class="img"> 
    <a href="#"> 
    <img src="#" alt="PIcture1" width="210" height="180"> 
    </a> 
    <div class="desc">BLAH</div> 
</div> 


<div class="img"> 
    <a href="#"> 
    <img src="Images/9700_1915630577543_1314909545_n.jpg" alt="oldman" width="210" height="180"> 
    </a> 
    <div class="desc">BLAH</div> 
</div> 

<div class="img"> 
    <a href="#"> 
    <img src="#" alt="Picture3" width="210" height="180"> 
    </a> 
    <div class="desc">BLAH</div> 
</div> 

<div class="img"> 
    <a href="#"> 
    <img src="#" alt="Picture4" width="210" height="180"> 
    </a> 
    <div class="desc">BLAH</div> 
</div> 
</div>

CSS:

#container{ 
} 

div.img 
    { 
    margin:5px; 
    padding: 5px; 
    border:none; 
    height:auto; 
    width:auto; 
    float:left; 
    text-align:center; 
    } 
div.img img 
    { 
    display:inline; 
    margin:5px; 
    border:none; 
    } 
div.img a:hover img 
    { 
    border:none; 
    } 
div.desc 
    { 
    text-align:center; 
    font-weight:normal; 
    width:120px; 
    margin:5px; 
    }

источник

2013-12-06 user3075406

типа документа вы используете может иметь важное значение для обеспечения хорошего ответа. Можете ли вы предоставить раздел заголовка своего html? –

атрибут html 'align' устарел. Вы хотите использовать css для центрирования вашего элемента, указав его явную ширину и используя «margin: 0 auto;» – essmahr

Это зависит от того, как вы хотите, чтобы центрировать свою галерею.

Есть несколько вещей, которые вы должны иметь в виду. Чтобы централизовать некоторый HTML, вам нужно иметь установленную ширину централизованного элемента.

Вот код для вас работать с:

Создать класс "центр" в CSS следующим образом:

div.centre{ 
    margin:0px auto; 
    width:800px; 
}

Затем добавьте его в контейнер следующим образом:

<div id="container" class="centre">

Секрет централизации находится в поле : 0px auto;, это соглашение современной веб-разработки для централизации контента.

Have a look at this code

P.S. не использовать align = "center" он обесценивается в более поздних версиях HTML. Лучше не использовать привычку использовать его и придерживаться классов CSS для централизации вещей для вас.

источник

2013-12-06 17:48:26

Нет проблем, не забудьте закрыть свой вопрос, приняв ответ. (нажав на галочку) :) –

Нельзя использовать выровнять. Это устаревшее свойство. Чтобы центрировать что-то с контейнером, вам нужно указать фиксированную ширину и добавить маржу автоматически.

Ex:

#container { 
width:970px; 
margin: 0 auto; 
}

Вы можете удалить отступы на div.img

источник

2013-12-06 17:48:35 toast

Центрирование и интеграция галереи изображений

ответ

Смежные вопросы