Как выровнять текст по форме? - PullRequest
Новая
       1

Как выровнять текст по форме?

0 голосов
/ 11 июля 2020

Я создал стандартный нижний колонтитул, имитирующий нижний колонтитул tourlife.com. Однако моя ссылка рядом с изображением Instagram не центрирована с изображением, а также ссылки «условия» и «помощь» также не согласованы с формой. Это моя вторая попытка использовать w3school 'css сетку ящиков / ящиков одинаковой ширины.

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <footer class="clearfix">
        <div class="box">
            <img class="ig_logo" src="images/instagramicon.jpg">
            <a href="#">@TOURLIFE</a>
        </div>
        <div class="box">
            <a class="biggertext" href="#">TERMS</a>
            <a class="biggertext" href="#">HELP</a>
            <form class="form">
                <input class="enter" type="email" placeholder="email">
                <button type="submit" class="button_1">SUBSCRIBE</button>
            </form>
        </div>
        <div class="box">
            <p>&copy Copyright Ben Cotta 2020</p>
        </div>
    </footer>
</body>
</html>

CSS: 

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

/* Main Footer */

.box {
    float: left;
    width: 33.33%;
    padding: 20px 0px;
    box-sizing: border-box;
    text-align: center;
    color: black;
    font-size: 13px;
    border-top: 1px solid black;
}

.clearfix::after {
    content: " ";
    clear: both;
    display: table;
}

.box .biggertext {
    font-size: 16px;
    padding: 0px 4px;
    margin-left: 6px;
}

.box a:visited {
    color: black;
}

.ig_logo {
    height: 100%;
    width: 20px;
}

/* Middle Box */

.form {
    float: right;
}

.enter {
    width: 10vw;
    margin-right: 10px;
    padding: 6px 10px;
}

.button_1 {
    background-color: black;
    color: white;
    padding: 6px 10px;
    width: 8vw;
    font-size: 12px;
    text-align: center;
}

/* Right Box */

1 Ответ

0 голосов
/ 11 июля 2020

Это намного проще сделать с помощью flexbox.

Когда вы устанавливаете ширину поля на 33,33%, он не знает, на что ссылаться. Если вы установите высоту вашего тела, это автоматически даст 100% ширину вашего экрана, а дочерний элемент вашего тела будет иметь ссылку.

Набрав "display: flexbox", ваши элементы в этом классе будут выровнены по строка. Вуаля! Используя «justify-content», вы можете решить, как вы хотите распределить свои элементы, а с «align-items» вы можете центрировать свои элементы по вертикали. Однако вы должны дать им место для этого.

Ваш Instagram-pi c не работал, поэтому я добавил новую ссылку. Думаю, должно работать. 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Main Footer */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
  border-top: 1px solid black;
  width: 80%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box {
  display: flex;
  align-items: center;
}

.box a {
  text-decoration: none;
  padding-right: 10px;
  color: #000;
}
.button_1 {
  background-color: black;
  color: #fff;
  border: none;
  outline: none;
  padding: 10px;
}

.enter {
  padding: 8px 10px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <footer class="clearfix">
      <div class="box">
        <img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
        <a href="#">@TOURLIFE</a>
      </div>
      <div class="box">
        <a class="biggertext" href="#">TERMS</a>
        <a class="biggertext" href="#">HELP</a>
        <form class="form">
          <input class="enter" type="email" placeholder="email" />
          <button type="submit" class="button_1">SUBSCRIBE</button>
        </form>
      </div>
      <div class="box">
        <p>&copy Copyright Ben Cotta 2020</p>
      </div>
    </footer>
  </body>
</html>

https://jsfiddle.net/battleaxe/5rc9asn0/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...