How to center an element (search form)? - html

Question

Here's the code. How to center a search form? This form should be always at the center of the screen no matter what screen resolution is.
I tried margin: 0 auto; but it doesn't work.
Thank You.
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</form>
</div>

Answer 1

Aligning text
Just add text-align: center to form and it is centered on all screen sizes.
text-align: center
This property describes how inline-level content of a block container is aligned.
form {
text-align: center; /* Add */
}
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</form>
</div>
Flexbox solution(Modern):
align-items: center
Items are centered in the cross-axis
Note that in the example we are using flex-direction: column. otherwise just use justify-content: center for flex-direction: row
.search-p {
display: flex;
flex-direction: column; /* Cross axis alignment; simply said vertical stacking/positioning */
align-items: center; /* Center cross-axis */
}
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</form>
</div>

Answer 2

I like to use the new Flexbox layout to place something in the center, a good guide is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Although it's rather new, but it's already supported in majority browsers and it's looking to become the new standard in the next year or so.
/* added new code */
.search-p {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</form>
</div>

Answer 3

CSS and form validation have nothing to do with each other, one is simply styling - the other is data checking which is handled either client-side by JS (bad idea without server validation) and / or server side by (always do this) so there will be no problem. (reacted on comment).
Some other problems might surface tho since text-align: center only works when elements are display: inline-block - float: left; float: right; display: block; will all break this center.
What I would suggest doing is adding a wrapper that will center the search in the form through means of margin: 0 auto - which is a much more solid way to center elements than text-align: center which as it says is meant for text (even tho I have also abused this property many many many times over).
.search-p--i {
color: #333;
font-weight: normal;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.search-p_wrap {
text-align: center;
}
/* Added a selector here */
.search-form .search-form-field-wrap {
display: block; /* optional - divs are block by default. */
width: 80%; /* or anything else */
margin: 0 auto; /* you're gonna want to use this for centering block elements */
}
.search-form button {
font-weight: bold;
color: #fff;
background: blue;
border: 0;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
padding: 10px 15px 10px 15px;
font-size: 14px;
}
.search-form input {
width: 240px;
height: 40px;
padding: 0px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4x;
border: 1px solid #ccc;
}
form {
text-align: center;
}
<div class="search-p">
<div class="search-p_wrap">
<h2 class="search-p_h2">Discover</h2>
<span class="search-p--i">Hi!</span>
</div>
<form class="search-form">
<!-- added a wrapper here -->
<div class="search-form-field-wrap">
<input type="text" placeholder="Enter" required>
<button type="submit">Search</button>
</div>
</form>
</div>