Как мне выровнять мою кнопку под моим заголовком и сделать ее отзывчивой? - PullRequest
Новая
       25

Как мне выровнять мою кнопку под моим заголовком и сделать ее отзывчивой?

0 голосов
/ 14 ноября 2018

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

HTML: 

    body{
      font-family: sans-serif;
      margin:0px;
    }
    .splash{
      background-color: #faead3;
      height: fill;
      padding: 0;
      margin:0;
      display: flex;
      justify-content: left; /* align horizontal */
      align-items: center; /* align vertical */
      height: 100vh;
    }
    
    .splash h1{
      margin:0px;
      font-size: 4.5vw;
      color: #08aabe;
      margin-left: 2.5em;
      padding-bottom: 3.5em;
    }
    .button {
        background-color: #08aabe; 
        border: none;
        color: #faead3;
        padding: 1em 2em;
        text-align: center;
        text-decoration: none;
        font-size: 1w;
    }
<div class="splash">
        <h1>Random Text.</h1>
      <a class="button"href="#">Button Link</a>
    </div>

https://codepen.io/anon/pen/qQraNB

Любая помощь приветствуется, спасибо!

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Вы используете display:flex, что делает их в одной строке так:

1.Удалить display:flex из .splash

2. font-size: 1w; в .button {} недействительно, измените его на font-size: 2.5vw;

  1. Вы можете использовать margin-left: 4.5em; для кнопки

См. Код в скрипте: 

   body{
      font-family: sans-serif;
      margin:0px;
    }
    .splash{
      background-color: #faead3;
      height: fill;
      padding: 0;
      margin:0;
      height: 100vh;
    }
    
    .splash h1{
      margin:0px;
      font-size: 4.5vw;
      color: #08aabe;
      margin-left: 2.5em;
      padding-bottom: 3.5em;
    }
    .button {
        background-color: #08aabe; 
        border: none;
        color: #faead3;
        padding: 1em 2em;
        text-decoration: none;
        font-size: 2.5vw;
        margin-left: 4.5em;
    }
<div class="splash">
     <h1>Random Text.</h1>
      <a class="button"href="#">Button Link</a>
</div>
0 голосов
/ 14 ноября 2018

В заголовке заголовка установлено значение padding-bottom: 3.5em;, которое подталкивает заголовок вверх. Если вы берете нижнюю часть отступа, кнопка должна выровняться по вертикали на обоих из них.

...