Правило центрирования CSS3, кажется, предотвращает правильное центрирование других элементов

Question

Я пытаюсь создать простой 1-страничный сайт HTML5/CSS3, и я сталкиваюсь с двумя проблемами, связанными с макетом, которые я, похоже, не могу оборачивать. Вот мой jsFiddle.

Как вы можете видеть, кнопка Скачать Info отображается в одном из трех состояний, в зависимости от того, насколько узкого или широкого окна:

• Либо он появится ниже контактные адреса электронной почты (если окно очень узкий/мобильный); или
• Он отображается в верхней части (в соответствии с номером телефона) раздела, в котором он живет, если окно немного шире; или
• Он появляется прижат к нижней части (в соответствии с 2-го по электронной почте) секции он живет, если окно полная осыпи/увеличившегося

Я искал эту кнопку, чтобы выставлять следующее поведение:

• Если окно очень узкое (например, в мобильном браузере), то я хочу, чтобы все оставалось как есть, с кнопкой, расположенной под вторым письмом; но ...
• Как только окно становится немного шире, вместо того, чтобы быть прижат к верхней части ее DIV, я хочу его вертикально по центру (так, в соответствии с 1-го по электронной почте)

Также есть 3 <img> теги, которые в настоящее время используют изображения placehold.it. Я ищу, чтобы отцентрировать их по горизонтали, так что они больше не появляются выровнен по левому краю и распределены равномерно по всему ряду, что они живут.

Я считаю, эти два вопроса, на самом деле являются частью той же самой проблемы CSS/стайлинга. В моей массивной <style> тег, вы увидите следующее правило:

#home .home-inner { 
    display: inline; 
    float: left; 
    text-align: center; 
    position: relative; 
    width: 100%; 
    padding: 10px; 
} 

Я считаю, что делает текст выровнен по центру и относительной как-то мешает мне быть в состоянии сосредоточить эти другие элементы, но я могу Не знаю, как именно. Есть идеи?

Answer 1

Вы должны использовать медиа-запрос в CSS и определить определенный CSS согласно минимальной ширине и максимальной ширине.

посмотреть здесь https://jsfiddle.net/sc5o7h1p/2/

для IMG:

@media screen and (max-width: 500px) { 
    .client-logo { 
    width: 90%; 
    height: 75% !important; 
    } 
    .container-img { 
    width: 90% !important; 
    } 
} 

Так что я добавить новый Classe в вашем HTML

<div class="col s4 m2 container-img"> 

И для Btn

@media screen and (min-width: 500px) { 
    .resume-download { 
    position: relative; 
    top: -117px; 
    left: 272px !important; 
    width:100% !important; 
    } 
}