Невозможно центрировать элемент ввода электронной почты
Я работаю над целевой страницей продукта в рамках буткемпа freecodecamp. Я использую библиотеку начальной загрузки.
Я не могу центрировать ввод электронной почты в форме. Я пробовал использовать 12 столбцов, что устраняет проблему, но они очень большие. Я хочу, чтобы он занимал место в 6 столбцов, но также выровнял его по центру.
<style>
* {
margin: 0;
padding: 0;
}
body {
}
main {
max-width: 1000px;
width: 100%;
margin: 0 auto;
text-align: center;
align-items: center;
}
#hero {
background-color: #FFF;
}
#video {
margin-top: 50px;
}
h1{
margin: 20px;
}
section{
margin: 50px;
} <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity = "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin = "anonymous">
<script src = "https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
<header id = "header">
<nav id = "nav-bar" class = "navbar navbar-dark navbar-expand-lg fixed-top bg-dark">
<a class = "navbar-brand" href = "#">
<img src = "https://png.icons8.com/nolan/50/000000/bank-building.png" id = "header-img" width = "30" height = "30" class = "d-inline-block align-top" alt = "">
OmegaStocks
</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarNav">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#hero">Home <span class = "sr-only">(current)</span></a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#features">Features</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#pricing">Pricing</a>
</li>
</ul>
</div>
</nav>
</header>
<main class = "container">
<section id = "hero" class = "jumbotron text-center">
<h1 class = "jumbotron-heading">Subscribe to our weekly newsletter</h1>
<div class = "container">
<form class = "" action = "https://www.freecodecamp.com/email-submit" id = "form">
<div class = "form-group">
<input id = "email" type = "email" name = "email" value = "" class = "form-control col-sm-6" placeholder = "Enter your email address" required/>
</div>
<input type = "submit" name = "" value = "Submit" id = "submit" class = "btn btn-primary btn-lg">
</form>
</div>
</section>
<section id = "features">
<h1>features</h1>
<div class = "container marketing">
<!-- Three columns of text below the carousel -->
<div class = "row">
<div class = "col-lg-4">
<img class = "rounded-circle" src = "https://png.icons8.com/nolan/96/000000/coins.png" alt = "Generic placeholder image" width = "140" height = "140">
<h2>Best in class</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class = "btn btn-primary" href = "#" role = "button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class = "col-lg-4">
<img class = "rounded-circle" src = "https://png.icons8.com/nolan/96/000000/money-box.png" alt = "Generic placeholder image" width = "140" height = "140">
<h2>Effective</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class = "btn btn-primary" href = "#" role = "button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class = "col-lg-4">
<img class = "rounded-circle" src = "https://png.icons8.com/nolan/96/000000/bitcoin.png" alt = "Generic placeholder image" width = "140" height = "140">
<h2>Accurate</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class = "btn btn-primary" href = "#" role = "button">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<div class = "container">
<iframe id = "video" width = "560" height = "315" src = "https://www.youtube.com/embed/pXRviuL6vMY" frameborder = "0" allow = "autoplay; encrypted-media" allowfullscreen></iframe>
</iframe>
</div>
</section>
<section id = "pricing">
<h1>pricing</h1>
<div class = "container">
<div class = "card-deck mb-3 text-center">
<div class = "card mb-4 box-shadow">
<div class = "card-header">
<h4 class = "my-0 font-weight-normal">Free</h4>
</div>
<div class = "card-body">
<h1 class = "card-title pricing-card-title">$0 <small class = "text-muted">/ mo</small></h1>
<ul class = "list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type = "button" class = "btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</div>
</div>
<div class = "card mb-4 box-shadow">
<div class = "card-header">
<h4 class = "my-0 font-weight-normal">Pro</h4>
</div>
<div class = "card-body">
<h1 class = "card-title pricing-card-title">$15 <small class = "text-muted">/ mo</small></h1>
<ul class = "list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<button type = "button" class = "btn btn-lg btn-block btn-primary">Get started</button>
</div>
</div>
<div class = "card mb-4 box-shadow">
<div class = "card-header">
<h4 class = "my-0 font-weight-normal">Enterprise</h4>
</div>
<div class = "card-body">
<h1 class = "card-title pricing-card-title">$29 <small class = "text-muted">/ mo</small></h1>
<ul class = "list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
<button type = "button" class = "btn btn-lg btn-block btn-primary">Contact us</button>
</div>
</div>
</div>
</section>
</main>
<footer class = "container py-5">
<div class = "row">
<div class = "col-12 col-md">
<img src = "https://png.icons8.com/nolan/50/000000/bank-building.png" alt = "">
<small class = "d-block mb-3 text-muted">© 2018</small>
</div>
<div class = "col-6 col-md">
<h5>Features</h5>
<ul class = "list-unstyled text-small">
<li><a class = "text-muted" href = "#">Cool stuff</a></li>
<li><a class = "text-muted" href = "#">Random feature</a></li>
<li><a class = "text-muted" href = "#">Team feature</a></li>
<li><a class = "text-muted" href = "#">Stuff for developers</a></li>
<li><a class = "text-muted" href = "#">Another one</a></li>
<li><a class = "text-muted" href = "#">Last time</a></li>
</ul>
</div>
<div class = "col-6 col-md">
<h5>Resources</h5>
<ul class = "list-unstyled text-small">
<li><a class = "text-muted" href = "#">Resource</a></li>
<li><a class = "text-muted" href = "#">Resource name</a></li>
<li><a class = "text-muted" href = "#">Another resource</a></li>
<li><a class = "text-muted" href = "#">Final resource</a></li>
</ul>
</div>
<div class = "col-6 col-md">
<h5>Resources</h5>
<ul class = "list-unstyled text-small">
<li><a class = "text-muted" href = "#">Business</a></li>
<li><a class = "text-muted" href = "#">Education</a></li>
<li><a class = "text-muted" href = "#">Government</a></li>
<li><a class = "text-muted" href = "#">Gaming</a></li>
</ul>
</div>
<div class = "col-6 col-md">
<h5>About</h5>
<ul class = "list-unstyled text-small">
<li><a class = "text-muted" href = "#">Team</a></li>
<li><a class = "text-muted" href = "#">Locations</a></li>
<li><a class = "text-muted" href = "#">Privacy</a></li>
<li><a class = "text-muted" href = "#">Terms</a></li>
</ul>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity = "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin = "anonymous"></script>
</body>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
61
4
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 4
просто установите в элементе #email использование поля auto.
#email {
margin:auto;
}
Вы можете создать строку с тремя столбцами, если хотите центрировать форму. Два столбца с 3 значениями на каждой стороне столбца с 6 значениями.
Иногда колонки работают против вас, и это простое решение, которое сработало для меня.
Вы можете использовать offset-sm-3 для центрирования входного элемента.
<input id = "email" type = "email" name = "email" value = "" class = "form-control col-sm-6 offset-sm-3" placeholder = "Enter your email address" required/>
Ответ принят как подходящий
Я решил вашу проблему, пожалуйста, проверьте следующий код 'section id = "hero"'
<section id = "hero" class = "jumbotron text-center">
<h1 class = "jumbotron-heading">Subscribe to our weekly newsletter</h1>
<div class = "container">
<div class = "row">
<div class = "col-sm-6 offset-sm-3">
<form class = "" action = "https://www.freecodecamp.com/email-submit" id = "form">
<div class = "form-group">
<input id = "email" type = "email" name = "email" value = "" class = "form-control" placeholder = "Enter your email address" required/>
</div>
<input type = "submit" name = "" value = "Submit" id = "submit" class = "btn btn-primary btn-lg">
</form>
</div>
</div>
</div>
</section>
Другие вопросы по теме
Inline-block не предотвращает перекрытие элементов меню при сворачивании браузера
Стиль формы по умолчанию web2py не работает
Скрытие первого и второго дочерних тегов для выбранного <span>
Анимация загрузчика таймера обратного отсчета
Многострочный список flexbox с переполнением текста: многоточие
Установить фоновое изображение во время выполнения после использования плагина камеры - ionic3
Ползунок ползунка диапазона не отображается в IE
Правильный способ получить собственный каталог шаблонов
Выделение не завершает цикл с использованием css3
Изображение выглядит резким и нечитаемым в Samsung Tizen TV
Похожие вопросы
События формы не срабатывают для элемента select (только JavaScript, без jQuery!)
Как автоматически увеличить идентификатор ячейки при клонировании строки таблицы с помощью JavaScript?
Невозможно изменить боковой текст при вводе типа "файл"
Невозможно заполнить таблицу кадром видео
Не могу отправить почту, получаю сообщение: не удалось создать почтовую функцию
Отказано в загрузке изображения, потому что оно нарушает политику безопасности контента - html
Настраиваемая срок действия проверки формы
Учебник по викторине, кнопка "отправить" отображается только тогда, когда отмечен один из ответов
Скрытие первого и второго дочерних тегов для выбранного <span>
Альтернатива документации Dojo
Это решает проблему, но не совсем чисто. Поскольку я использую bootstrap, лучше исправить это с помощью классов начальной загрузки, а не дополнительного кода.