Форматирование кнопки для масштабирования со страницей и другими элементами страницы без использования позиции - PullRequest
Новая
       16

Форматирование кнопки для масштабирования со страницей и другими элементами страницы без использования позиции

0 голосов
/ 23 сентября 2018

Я немного новичок в CSS и HTML, но я пытаюсь написать код сайта, проведенного в Китае.В настоящее время я сталкиваюсь с проблемой выравнивания кнопки с другими значками ссылок на контакты и ее правильной прокрутки со страницей.Я нашел какой-то формат CSS для кнопки, которая мне очень понравилась в Интернете, но у меня возникли проблемы , отформатировав ее так, чтобы она была такой же высоты , и центрировав ее в той же горизонтальной средней точке, что и другие мои значки .Я попытался откорректировать поля, но безрезультатно.Я обнаружил, что при настройке положения, это немного усложняет масштабирование.Мне было интересно, могу ли я получить некоторую помощь с этим.Спасибо!Я включу js скрипку с кодом.

HTML & CSS: 

.Social {
  margin-top: 1%;
  margin-left: 29.3%;
}

.Pop {
  margin-left: 0.8%;
  margin-right: 0.8%;
  width: 6%;
  transition: all .3s ease;
  -moz-transition: all .3 ease;
  -ms-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
}

.Pop:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  margin-left: 2%;
  padding: 1% 4%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 80%;
  font-family: "eraslight";
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}
<div class="Social">
  <img alt="snap circle" class="Pop" src="https://image.ibb.co/cHB5SU/SnapPop.png">

  <img alt="Insta circle" class="Pop" src="https://image.ibb.co/eOtkSU/InstaPop.png">

  <img alt="Wechat circle" class="Pop" src="https://image.ibb.co/dppEMp/WePop.png">

  <img alt="Linkedin circle" class="Pop" src="https://image.ibb.co/effAu9/Linkedin_Pop.png">

  <img alt="Gmail circle" class="Pop" src="https://image.ibb.co/movbZ9/GmailPop.png">

  <button class="button button5"><h2>Résumé</h2></button>
</div>

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Вы можете установить высоту в содержащем div и позволить детям наследовать его.Добавьте display: flex; и align-items: center; в контейнер следующим образом: 

    .Social {
      display: flex;
      align-items: center;
      height: 40px;
      margin-top: 1%;
      margin-left: 29.3%;
    }

    .Social img, .Social button {
      display: inline-block;
      width: auto;
      height: inherit;
    }


    .Pop {
      margin-left: 0.8%;
      margin-right: 0.8%;
      width: 6%;
      transition: all .3s ease;
      -moz-transition: all .3 ease;
      -ms-transition: all .3s ease;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
    }

    .Pop:hover {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
    }

    .button {
      background-color: #4CAF50;
      /* Green */
      border: none;
      color: white;
      margin-left: 2%;
      padding: 0 4%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 80%;
      font-family: "eraslight";
      -webkit-transition-duration: 0.4s;
      /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
    }

    .button5 {
      background-color: white;
      color: black;
      border: 2px solid #555555;
    }

    .button5:hover {
      background-color: #555555;
      color: white;
    }
    <div class="Social">
      <img alt="snap circle" class="Pop" src="https://image.ibb.co/cHB5SU/SnapPop.png">
    
      <img alt="Insta circle" class="Pop" src="https://image.ibb.co/eOtkSU/InstaPop.png">
    
      <img alt="Wechat circle" class="Pop" src="https://image.ibb.co/dppEMp/WePop.png">
    
      <img alt="Linkedin circle" class="Pop" src="https://image.ibb.co/effAu9/Linkedin_Pop.png">
    
      <img alt="Gmail circle" class="Pop" src="https://image.ibb.co/movbZ9/GmailPop.png">
    
      <button class="button button5">Résumé</button>
    </div>

Ваш HTML остается прежним, за исключением того, что я удалил теги <h2> из вашего текста <button>;это не нужно и влияет на вертикальное выравнивание в некоторых браузерах.

0 голосов
/ 23 сентября 2018

Все ваши элементы отображаются в строке;чтобы отрегулировать выравнивание встроенных элементов по вертикали, вы должны установить свойство vertical-align. 

img {
    ...
    vertical-align: middle;
}
.button {
    ...
    vertical-align: middle;
}

Чтобы настроить .button для лучшего визуального соответствия его соседям, вы можете найти удаление h2 теги, установив для своего отступа фиксированный размер и установив для шрифта фиксированный размер, чтобы помочь. 

.button {
    font-size: 14px;
    padding: 5px;
    ...
}


<button class="button button5">Résumé</button>
...