Выравнивание картинок с подписью по горизонтали

[Hosemose]

Добрый день!
Прошу помочь! Вставляю картинки в блок div и они прекрасно становятся по горизонтали относительно друг друга. Делаю подпись и все картинки уходят друг под друга. Что не так?

<div id="header-menu-i">                 <p>ИЗДЕЛИЯ</p>              <div id="header-menu-i-inner">                        <form>                          <img src="/images/iproduct/benz.jpeg" width="10%"><p>Бензиновые электростанции</p>                          <img src="/images/iproduct/diesel.jpg" width="10%"><p>Дизельные электростанции</p>                          <img src="/images/iproduct/gazoporshn.jpg" width="10%"><p>Газопоршневые электростанции</p>                          <img src="/images/iproduct/gazturb.jpg" width="12%"><p>Газотурбинные электростанции</p>                          <img src="/images/iproduct/zip.jpeg" width="12%"><p>Запчасти</p>                          <img src="/images/iproduct/ups.jpg" width="10%"><p>ИБП и альтернативные источники питания</p>                        </form>                </div>                </div>

#header-menu-i {                        position:absolute;                        padding-top:40px;                        padding-bottom:40px;                        left: 350px;                        width:100px;                        cursor: pointer;                        color: #434342;                        font-size: 20px;                        font-family: "FFDINWebProMedium", Calibri, "Trebuchet MS", Arial, Helvetica, sans-serif;            -webkit-transition-duration: 0.3s;            -moz-transition-duration: 0.3s;            -o-transition-duration: 0.3s;            transition-duration: 0.3s;            -webkit-border-radius: 0 5px 5px 0;              -moz-border-radius: 0 5px 5px 0;             border-radius: 0 5px 5px 0;}#header-menu-i-inner {            position: fixed;            top: 85px;            left: 0px;            background: #FFFFFF;            width: 0px;            height: 0px;                        font-size:0px;            -webkit-transition-duration: 0.3s;            -moz-transition-duration: 0.3s;            -o-transition-duration: 0.3s;            transition-duration: 0.3s;            -webkit-border-radius: 0 0 5px 0;            -moz-border-radius: 0 0 5px 0;                            }#header-menu-i:hover {        }   #header-menu-i:hover #header-menu-i-inner {              height: 300px;                         width: 100%;                         font-size:20px;                            border-style: groove;        }

[Great Rash]

<p> - блочный элемент, вполне логично, что он не хочет выравниваться в строку.

[Fantastic]

Для подписей картинок можно например использовать <figure> и <figcaption> Вот ссылка почитать http://htmlbook.ru/html/FIGURE

Edited October 28, 2015 by Fantastic

[Hosemose]

<div id="header-menu-i">                 <p>ИЗДЕЛИЯ</p>              <div id="header-menu-i-inner">                        <div align="center">                        <form>                         <figure><p><img src="/images/iproduct/benz.jpeg" width="10%"></p>                         <figcaption>Группа</figcaption></figure>                         <figure><p><img src="/images/iproduct/diesel.jpg" width="10%"></p>                         <figcaption>Группа</figcaption></figure>                         <img src="/images/iproduct/gazoporshn.jpg" width="10%">                         <img src="/images/iproduct/gazturb.jpg" width="12%">                         <img src="/images/iproduct/zip.jpeg" width="12%">                         <img src="/images/iproduct/ups.jpg" width="10%">                        </form>                       </div>                </div>                </div>

Все равно, сгруппированные картинки выстраиваются в столбец, а картинки без текста нормально строятся в ряд((((

[Pinga]

jsfiddle

 

не?

Edited October 29, 2015 by Pinga

[Hosemose]

Спасибо всем, помог совет модератора. Сделал так:

#hmii-img {display: table-cell;height: 200px;width: 200px;}

 <div align="center">                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/benz.jpeg" ><p>Бензиновые электростанции</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/diesel.jpg" ><p>Дизельные электростанции</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/gazoporshn.jpg" width="70%"><p>Газопоршневые электростанции</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/gazturb.jpg" ><p>Газотурбинные электростанции</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/zip.jpeg" ><p>Запчасти</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/ups.jpg" ><p>ИБП и альтернативные источники питания</p></div></a>                         </div>

[Great Rash]

Что-то не так у вас с порядком закрывания тегов. Сами найдёте?

[Hosemose]

  On 10/30/2015 at 8:11 AM, Great Rash said:

Что-то не так у вас с порядком закрывания тегов. Сами найдёте?

Спасибо, есть такое:

<div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/ups.jpg" ><p>ИБП и альтернативные источники питания</p></a></div>