On my site I want a <form> to center. I've tried everything but still doesn't work. Does it maybe has something to do with that my site is in WordPress?
<section id="jobify_widget_search_hero-2" class="widget widget--home widget--home--no-margin widget--home-hero-search">
<div class="hero-search hero-search--has-overlay hero-search--height-large" style="background-image:url(http://jobboard.jobsbe.be/wp-content/uploads/2017/03/widget-home-feature-callout-1-2.jpg); ?>; background-position: center center">
<div class="container">
<div class="hero-search__content" style="color:#ffffff"><h1 class="hero-search__title" style="color:#ffffff">Vacatures</h1></div>
<form class="job_search_form job_search_form--flat" action="http://jobboard.jobsbe.be/find-a-job/" method="GET" style="text-align:center" >
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords" id="search_keywords" placeholder="Keywords">
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location" id="search_location" placeholder="Location">
</div>
<div class="search_submit">
<input type="submit" name="submit" value="Search">
</div>
</form>
</div>
</div>
</section>
The webpage to few the site is http://jobboard.jobsbe.be/test/
The input boxes and the search boxes need to be centered.
There is this rule in your style.css file:
.search_jobs > div, .search_resumes > div {
float: left;
}
Change that to
.search_jobs > div, .search_resumes > div {
display: inline-block;
}
Then the centering in the parent container will work.
Related
I've had no luck trying to center these 2 divs. I've tried the suggestion in this SO post with no success. I've also experimented with margin: auto and width: 50%. That gets me close, but it's not very centered, and when I adjust the width, the Disabled switch div ends up wrapping awkwardly to the next line, in spite of trying text-align: center.
<form method="post" action="Invitation.php" onsubmit="return checkForm(this)">
<div style="width: 100%">
<div style="margin-left:auto;margin-right:auto">
<!-- Manual switch -->
<div class="flipswitch" style="float: left">
<input type="checkbox" name="flipswitchRecurring" id="flipswitchRecurring" class="flipswitch-cb" onclick="flipSwitch(this)">
<label class="flipswitch-label" for="flipswitchRecurring">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<!-- Disabled switch -->
<div class="flipswitch2" style="float: left; margin-left: 35px">
<input type="checkbox" name="flipswitchEnabled" id="flipswitchEnabled" class="flipswitch2-cb">
<label class="flipswitch2-label" for="flipswitchEnabled">
<div class="flipswitch2-inner"></div>
<div class="flipswitch2-switch"></div>
</label>
</div>
</div>
</div>
</form>
How can I center these 2 DIVs?
Modification to your code (Added text-align:center and display:inline-block) =>
<form method="post" action="Invitation.php?AccessCode=5GR1A67833Y7W98UW8546FJM8" onsubmit="return checkForm(this)">
<div style="width: 100%">
<div style="text-align: center;">
<!-- Manual switch -->
<div class="flipswitch" style="display: inline-block;">
<input type="checkbox" name="flipswitchRecurring" id="flipswitchRecurring" class="flipswitch-cb" onclick="flipSwitch(this)">
<label class="flipswitch-label" for="flipswitchRecurring">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<!-- Disabled switch -->
<div class="flipswitch2" style="display: inline-block;">
<input type="checkbox" name="flipswitchEnabled" id="flipswitchEnabled" class="flipswitch2-cb">
<label class="flipswitch2-label" for="flipswitchEnabled">
<div class="flipswitch2-inner"></div>
<div class="flipswitch2-switch"></div>
</label>
</div>
</div>
</div>
</form>
As usual, what is a pain with classic CSS (float, inline-block, etc.) is a breeze with Flexbox.
form {
border: blue dashed 2px;
}
.centrer {
display: flex;
justify-content: center;
}
.switchBlock {
border: red dashed 2px;
width: 100px;
}
.switchBlock:nth-child(2) {
margin-left: 35px;
}
<form method="post" action="Invitation.php?AccessCode=5GR1A67833Y7W98UW8546FJM8" onsubmit="return checkForm(this)">
<div class="centrer">
<!-- Manual switch -->
<div class="switchBlock flipswitch">
<input type="checkbox" name="flipswitchRecurring" id="flipswitchRecurring" class="flipswitch-cb" onclick="flipSwitch(this)">
<label class="flipswitch-label" for="flipswitchRecurring">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<!-- Disabled switch -->
<div class="switchBlock flipswitch2">
<input type="checkbox" name="flipswitchEnabled" id="flipswitchEnabled" class="flipswitch2-cb">
<label class="flipswitch2-label" for="flipswitchEnabled">
<div class="flipswitch2-inner"></div>
<div class="flipswitch2-switch"></div>
</label>
</div>
</div>
</form>
In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.
I want it appears like this:
AAAAAAAA:input text
BBBBBBBB:input text
CCCCCCCC:input text
DDDDDDDD:input text
submit shutdown
But acturally, it does not appear format, it likes this:
AAAAAAAA:input text
BBBBBBBB:
input text
CCCCCCCC:input text
DDDDDDDD:
submit input text
shutdown
It is ugly, I don't want it like that.
Here is my css and html code:
<style>
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);}
.firDiv{height:80%;width:100%}
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%}
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%}
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%}
</style>
<div id="addCnt" class="addDiv">
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<label>AAAAAAA:</label><input type="text" name="prdSty"><br />
<label>BBBBBBB:</label><input type="text" name="diffLvl"><br />
<label>CCCCCCC:</label><input type="text" name="repTm"><br />
<label>DDDDDDD:</label><input type="text" name="fixTm"><br />
</div>
<div class="secDiv">
<input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" >
</div>
</form>
</div>
Who can help me?
may be something like this?
* {
box-sizing: border-box;
}
.firDiv label {
padding: 5px;
text-align: right;
float: left;
width: 17%;
}
.firDiv .control {
float: left;
width: 83%;
}
.form-group {
clear: both
}
.secDiv {
margin-left: 16%;
padding-top:10px;
}
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<div class='form-group'>
<label>AAAAAAA:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>BBBBBBB:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>CCCCCCCC:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>DDDDDDDDD:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
</div>
<div class="secDiv">
<input type="submit" value="add" />
<input id="sdnBt" type="button" value="shutdown">
</div>
</form>
Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.
.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%;}
.secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}
I have applied clear:both in secDiv and float:left in firDiv.
DEMO
add this to your css fiddle
.secDiv input {
width: 50%;
}
Rather try adding each input and label to their own div, something like this:
https://jsfiddle.net/ba0cL61b/5/
What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:
<div class="row">
<div class="label">
<label>AAAAAAA:</label>
</div>
<div class="input">
<input type="text" name="prdSty">
</div>
</div>
This is a bit easier to understand and style.
I have a header and section where elements in header are overlapping. Specifically, two divs inside header are overlapping (one's floated left, the other floated right)
HTML:
<div id="main-contianer">
<header id="main">
<div id="logo">
<h1>Ladder</h1>
</div>
<div id="sign-in">
<form id="log-in" action="login.jsp"><!--not complete-->
<div id="username">
<label>Username</label>
<input type="text" name="username">
</div>
<div id="password">
<label>Password</label>
<input type="password" name="password">
</div>
<div id="log-in">
<input type="submit" value="Log In">
</div>
</form>
</div>
</header>
<section>
<!--code here not included-->
</section>
CSS:
header#main div#logo{
float: left;
}
header#main div#sign-in{
float: right;
}
Here is the JSFiddle to see what it looks like: http://jsfiddle.net/FLwUA/106/
How do I ensure that header and section don't overlap?
try using position: relative instead of float.
then give display: inline-block;
Add a new class in CSS as:
CSS
.clearfix {
clear: both;
}
After </header> but before <section> add the following in HTML
HTML
<div class="clearfix"></div>
Refer here.
I have the following code and I'm trying to get both of these inputs aligned centered. Where is the problem in the code?
<div class='form'>
<form class="form-inline" role="form">
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">#</span>
<input class="text-center form-control" align="middle" placeholder="username" name="username" type="text">
</div>
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">P</span>
<input class="text-center form-control" align="middle" placeholder="password" name="password" type="password">
</div>
</form>
</div>
<style>
.text-center {
width: 50%;
}
div {
text-align:center;
}
</style>
Both inputs are still aligned to the left.
Inputs are not text, and cannot be centered using text-align. Target the element directly in your css, like so:
input {
display: block;
margin: 0 auto;
}
This will center the inputs within the parent element.
I would like to align vertically all my inputs, how can I do it ?
Cause label can be very long and I want that alignemnt still perfect.
CSS
.span6{
overflow:hidden;display:inline;
}
.span6 label, .span6 input {
display:inline-block;
}
.span6 input {
width:70%;
margin-left:3%;
}
HTML
<div class="row-fluid">
<form class="form well">
<div class="row-fluid">
<div class="control-group span6">
<label for="first-name">Company</label>
<input class="first-name" type="text" class="input-block-level" />
</div>
<div class="control-group span6">
<label for="last-name">Title</label>
<input class="last-name" type="text" class="input-block-level" />
</div>
<div class="control-group span6">
<label for="last-name">Country</label>
<input class="last-name" type="text" class="input-block-level" />
</div>
</div>
</div>
</div>
JSFIDDLE
http://jsfiddle.net/kY5LL/154/
You should probably read a bit more the Bootstrap documentation, there is built-in styles for aligning forms horizontally and vertically.
I modified your code to use the horizontal style (.form-horizontal).
http://jsfiddle.net/LeBen/kY5LL/156/