Unable to center buttons within DIV/Align text and email submission form
Question
I'm having a bit of trouble lining up the "Get updates right to your inbox!" text with the email submission form. It's supposed to be positioned at the bottom of the background image, but I can only get it there by adjusting the margins. Also, as you probably see, the "Read More" and "Get Tickets" buttons are supposed to be centered. I've tried text-align: center, but that doesn't seem to be doing anything. Also, is there any way to reduce the size of the columns? I'd really appreciate the help! Here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="indyfolk.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<script src=""></script>
<title>Indy Folk News</title>
</head>
<body>
<div class="topnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="search" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<a class="active" href="#about">ABOUT</a>
<a href="#news">NEWS</a>
<a href="#events">EVENTS</a>
<a href="#contact">CONTACT</a>
</div>
<div class="banner">
<p>Providing News of Indy Folk Music,
<br>
Folk Art, Storytelling & Cultural News
<br>
to the Community
</p>
<button class="button button1">LEARN MORE</button> <button class="button button2">SEE EVENTS</button>
<div class="bottomhdr">
<div class="bottomtxt">
<p>GET UPDATES RIGHT TO YOUR INBOX</p>
</div>
<div class="email">
<form action="/action_page.php">
<input type="text" placeholder="enter your email address" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
<br>
<div class="row">
<h1>Recent Posts</h1>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>News Post Title</b></p>
<p><b>Posted by:</b> Poster Name</p>
<p><b>Date:</b> January 8, 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button3">READ MORE</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>News Post Title</b></p>
<p><b>Posted by:</b> Poster Name</p>
<p><b>Date:</b> January 8, 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button3">READ MORE</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>News Post Title</b></p>
<p><b>Posted by:</b> Poster Name</p>
<p><b>Date:</b> January 8, 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button3">READ MORE</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>News Post Title</b></p>
<p><b>Posted by:</b> Poster Name</p>
<p><b>Date:</b> January 8, 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button3">READ MORE</button>
</div>
</div>
<div class="row">
<div class="column" style="background-color:#ccc;"></div>
<div class="column" style="background-color:#ccc;"></div>
<div class="column"style="background-color:#ccc;"></div>
<div class="column"style="background-color:#ccc;"></div>
</div>
<br>
<div class="link">
<a href="" target="_blank">SEE ALL NEWS POSTS ></a>
</div>
<br>
<hr>
<br>
<div class="row1">
<h1>Upcoming Events</h1>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>Band Name</b></p>
<p><b>Date:</b> January 8, 2018</p>
<p><b>Location:</b> White Rabbit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button4">GET TICKETS</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>Band Name</b></p>
<p><b>Date:</b> January 8, 2018</p>
<p><b>Location:</b> White Rabbit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button4">GET TICKETS</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>Band Name</b></p>
<p><b>Date:</b> January 8, 2018</p>
<p><b>Location:</b> White Rabbit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button4">GET TICKETS</button>
</div>
<div class="column"style="background-color:#D5D6D6;">
<img src="folkband.png">
<p><b>Band Name</b></p>
<p><b>Date:</b> January 8, 2018</p>
<p><b>Location:</b> White Rabbit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
<button class="button button4">GET TICKETS</button>
</div>
</div>
<br>
<br>
<div class="link">
<a href="" target="_blank">SEE ALL EVENTS ></a>
</div>
</body>
</html>
CSS
body, html {
height: 100%;
margin: 0;
font-family: 'Lato', sans-serif;
}
.topnav {
overflow: hidden;
font-family: 'Lato', sans-serif;
margin-top: 30px;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 6px;
font-size: 17px;
border: none;
background-color: #D7D2D2;
}
.topnav .search-container button {
background: #5AA797;
margin-top: 6px;
color: white;
}
.banner {
background-image: url('folkband.png');
background-position: center;
background-size: cover;
height: calc(100% - 96px);
}
.banner p {
font-family: 'Lato', sans-serif;
font-size: 42px;
color: white;
padding-left: 60px;
padding-top: 140px;
}
.button {
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 0px;
cursor: pointer;
padding: 4px 30px;
}
.button1 {
margin-left: 60px;
background-color: #E4631D;
}
.button2 {
background-color: #F2CB54;
}
.bottomtxt {
width: 50%;
float: left;
}
.bottomtxt p {
font-size: 18px;
background-color: #24664D;
padding-top: 20px;
padding-bottom: 20px;
margin-top: 153px;
}
.email {
float: right;
background-color: #24664D;
margin-top: 153px;
padding-top: 20px;
padding-bottom: 21px;
padding-left: 386px;
padding-right: 16px;
}
.email input[type=text] {
font-size: 14px;
border: none;
}
.column {
float: left;
width: 24%;
margin: 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column img {
width: 100%;
background-size: cover;
}
.row h1 {
font-size: 25px;
text-align: center;
color: #E4631D;
}
.button3 {
background-color: #E4631D;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
padding: 4px 30px;
}
.link {
text-align: center;
}
a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
.row1 h1 {
font-size: 25px;
text-align: center;
color: #F2CB54;
}
.button4 {
background-color: #F2CB54;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
padding: 4px 30px;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 50px;
margin-right: 50px;
border-style: inset;
border-width: .25px;
}
1 answers
solution1
0 2018-03-01 07:24:31
You can do it easily using flexbox . Check the snippet below and try more until found desire solution.
.bottomhdr{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
<div class="bottomhdr"> <div class="bottomtxt"> <p>GET UPDATES RIGHT TO YOUR INBOX</p> </div> <div class="email"> <form action="/action_page.php"> <input type="text" placeholder="enter your email address" name="search"> <button type="submit"><i class="fa fa-search"></i>Search</button> </form> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Text align center buttons
Using text-align center to center the email form :
Align text to the center of a div
Center-align text within DIV with “display: table-cell”
CSS center align DIV keeping text within left aligned?
Center align image within DIV
Center align buttons but left align the text inside
Center 2 DIV within outer DIV with text-align center + display inline-block
align text and image in center of div
Vertical align a text to a center of a div
Related Tags