Центрирование 3 изображений с помощью CSS

Существует группа изображений, которые должны быть расположены по горизонтали по одной и той же линии под разными разделами. Один я хочу быть особым типом изображения, которое на самом деле происходит из тега.Центрирование 3 изображений с помощью CSS

Мне нужны все эти изображения, в том числе изображение входного тега, с центром в соответствующем div во все времена.

Сейчас моя разметка в основном:

 <div class="col-xs-6 col-sm-3"> 
     <h1>Some centered text</h1> 
     <div class="image-container"> 
      <img class="contact-images" src="image1.png" /> 
      <img class="contact-images" src="image2.png" /> 
      <div class="email-image"> 
        <form action="contact-team-member.php" method="POST"> 
         <INPUT TYPE="hidden" NAME="1" VALUE="one"> 
         <INPUT TYPE="hidden" NAME="2" VALUE="two"> 
         <input type="image" class="contact-images" src="image3.png" alt="Submit Form" /> 
        </form> 
      </div> 
     </div> 
    </div>

С помощью CSS:

.image-container { 
    text-align: center; 
} 
.contact-images { 
    display: inline-block; 
    padding: 5px; 
}

Это CSS я нашел рекомендовал онлайн в форумах, когда я гугле решения проблемы, к сожалению, не работа для меня.

К сожалению, изображения центрированы, но все они сложены друг на друга - не в одной горизонтальной линии. Я думаю, что это вызвано входным изображением.

Вот реальное изображение с моего сайта:

enter image description here

источник

2014-10-05 Zach Cook

только опечатка в моем вопросе! извините, его исправленный сайт @misterManSam –

http://texasca.com/team не хочет делиться им в целом, но я поставлю ссылку как комментарий на данный момент –

Начните с: строка 67 из team.css ' .employee-profile img' в настоящее время 'display: block' изменяется на встроенный блок – misterManSam

JS Fiddle

ширина Дают в % так, что они не идут вниз на браузере измените размер width родителя также будет уменьшаться, так % поможет проверить выше скрипку

.contact-images { 
    display: inline-block; 
    padding: 5px; 
    width:20%; 
    height:auto; 
}

источник

2014-10-05 09:55:18

Вы забыли точки в правилах CSS ...

.image-container { 
    text-align: center; 
} 
.contact-images { 
    display: inline-block; 
    padding: 5px; 
}

источник

2014-10-05 09:52:18

, что было ошибкой при вводе вопроса, мой фактический CSS имеет точки, спасибо за указание на то, что хоть! –

использование этого demo

.image-container { 
    text-align: center; 
} 
.contact-images { 
    display: inline-block; 
    padding: 5px; 
}

источник

2014-10-05 09:53:47

Да, я не понимаю, почему это работает в Fiddle on not on my website :( –

Вы можете указать ссылку на свой сайт? –

http://texasca.com/team @Tambo –

попробовать этот http://jsfiddle.net/0sqkpg9t/ Вы забыли добавить точки в вашем css

.image-container { 

background-color:gold; 
width:500px; 
height:220px; 
text-align: center; 
} 
.contact-images { 

width:200px; 
height:200px; 
display: inline-block; 
}

источник

2014-10-05 09:55:25 Akshay

Центрирование 3 изображений с помощью CSS

ответ

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