I have one problem.
I need help to center the input type text and email and this two should also be next to each other. Also center the input checkbox below.
It should look just as the text_box_newsletter. It need to be in the center.
I'm stuck, tried everything so now I'm only confused.
Please help a student :) thanks alot!
.grid_newsletter .text {
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 41px;
}
.grid_newsletter input {
width: 380px;
}
.grid_newsletter .checkbox {
margin-top:
}
.grid_newsletter input[type="checkbox"] {
width: 22px;
height: 22px;
border: 2px solid black;
}
.grid_newsletter .text_box_newsletter {
background: white;
width: 495px;
height: 90px;
text-align: center;
margin-top: 27px;
margin-left: auto;
margin-right: auto;
}
.grid_newsletter .text_box_newsletter p {
padding-top: 39px;
padding-bottom: 35px;
text-align: center;
font-weight: 600;
font-size: 18px;
letter-spacing: 0.100em;
}
<div class="grid_newsletter">
<div class="padding">
<div class="content">
<div class="text">Newsletter</div>
<form>
<input type="text" name="firstname" placeholder="förnamn">
<input type="email" name="email" placeholder="e-post">
</form>
<div class="checkbox"><input type="checkbox" name="confirm"> I confirm Read more</div>
<div class="text_box_newsletter">
<p>skicka</p>
</div>
</div>
On the form you can use flexbox to align all items:
.your-form-selector {
display: flex;
justify-content: center;
}
I've tested this and it works unless I'm misunderstanding the question.
I try to avoid using text-align for block content as this may break right to left scripted languages. This shouldn't be an issue if you never plan to expand your site though.
You can do like this also all fields should be center aligned is better to target a div instead of target elements.
.content {
text-align: center;
}
Add these to properties and you are sorted:
form,.checkbox {
text-align: center;
}
Using Flexbox is a great way to do this, however, it isn't supported in older browsers (Internet Explorer), so the following will do exactly the same thing.
form input { display:block; margin:auto;}
.checkbox { text-align:center;}
I have used 2 flexboxes.
A column to contain the input fields
A row to contain the checkbox. This also allows for vertical alignment, so the text after the checkbox is neatly aligned with the center of the checkbox.
Furthermore, 2 closing divs were missing.
.grid_newsletter .text {
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 41px;
}
.grid_newsletter input {
width: 380px;
}
.grid_newsletter .checkbox {
margin-top:
}
.grid_newsletter input[type="checkbox"] {
width: 22px;
height: 22px;
border: 2px solid black;
}
.grid_newsletter .text_box_newsletter {
background: white;
width: 495px;
height: 90px;
text-align: center;
margin: 27px auto 0 auto;
}
.grid_newsletter .text_box_newsletter p {
padding-top: 39px 0 35px 0;
text-align: center;
font-weight: 600;
font-size: 18px;
letter-spacing: 0.100em;
}
/* Added */
.grid_newsletter form {
display: flex;
flex-direction: column;
align-items: center;
}
.grid_newsletter .checkbox {
display: flex;
justify-content: center;
align-items: center;
}
.grid_newsletter .checkbox a {
margin: 0 0 0 0.5rem;
}
<div class="grid_newsletter">
<div class="padding">
<div class="content">
<div class="text">Newsletter</div>
<form>
<input type="text" name="firstname" placeholder="förnamn">
<input type="email" name="email" placeholder="e-post">
</form>
<div class="checkbox"><input type="checkbox" name="confirm"> I confirm Read more</div>
<div class="text_box_newsletter">
<p>skicka</p>
</div>
</div>
</div>
<!-- Added -->
</div>
<!-- Added -->
Related
I am trying to place a checkbox below a text input box, but my InputBar is not occupying the full parent width and checkbox is appearing at the end of InputBar.
I am a front-end newbea, can someone suggest what can I change to place the checkbox under the input bar.
My styling code:
.background {
background-image: url("../Back.jpg");
background-repeat: no-repeat;
margin: -11px -16px 0 -16px;
background-size: 100%;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.inputBar {
padding-left: 30%;
width: 100%;
.enterButton {
background: url("../arrowNext.svg") no-repeat center white;
height: 50px;
width: 35px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
vertical-align: top;
}
.enterText {
color: $primary-text-color-light;
width: 60%;
height: 50px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
display: inline-block;
vertical-align: top;
padding-left: 2%;
}
}
.check {
display: inline-block;
.checkBox {
width: 40px;
height: 20px;
background: #555;
margin: 5px;
border-radius: 3px;
padding-left: 30%;
}
.checkBoxText {
font-weight: bold;
font-size: larger;
color: grey;
background-color: whitesmoke;
}
}
<div class="background">
<div class="inputBar">
<input class="enterText" id="inputBox" type="text" placeholder="Enter something" />
<button class="enterButton">Enter</button>
</div>
<div class="check">
<input class="checkBox" type="checkbox" defaultChecked/>
<span class="checkBoxText">Check this</span>
</div>
</div>
By default, flex sets direction to row.
You can set flex-direction: column to achieve what you want.
.container {
display: flex;
flex-direction: column;
}
<div class="container">
<div>
<input type="text" />
<button>Enter</button>
</div>
<div>
<input type="checkbox" id="check-this" />
<label for="check-this">Check this</label>
</div>
</div>
I am attempting to center a image next to an input field although when attempting to do so with vertical-align: bottom; nothing happens and my image is not centered where I want it to be.
I have tried to use position:relative and then move my image using top,bottom etc but I want to do it in a way that uses flexbox.
How would I go about doing this and what divs would I have to change to get the layout I want.
Layout I am trying to achieve:
Jsfiddle
HTML
<div class="container">
<h1>Inputs</h1>
<p class="spacing">multiple inputs...</p>
<div class="searchinput">
<input type="text" name="search" id="google-input" placeholder="Google search...">
<img src="logos/google.png" alt="youtube" class="logos">
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logos{
width: 90px;
vertical-align: bottom;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 90vh;
}
.searchinput {
margin-top: 20px;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}
You need to have the direct parent of the items that you want to have flex properties to have the display:flex property. So in your case it would be the .searchinput. So your .searchinput css should be the following:
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
So here is a snippet of the whole thing:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logos{
width: 90px;
vertical-align: bottom;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 90vh;
}
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}
<div class="container">
<h1>Inputs</h1>
<p class="spacing">multiple inputs...</p>
<div class="searchinput">
<input type="text" name="search" id="google-input" placeholder="Google search...">
<img src="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>
In my form, the lables/inputsare aligned with floats and fixed widths. Because of this, my labels have empty whitespace which makes it difficult to center the form in the parent div.
How can I center this form?
#Form1Layout {
font-family: Verdana;
font-size: 10pt;
margin-top: 10px;
text-align: center;
padding: 10px;
}
#Form1Layout label {
text-align: right;
padding-right: 10px;
width: 80px;
}
#Form1Layout input {
width: 300px;
}
#Form1Layout label,
#Form1Layout input {
display: block;
float: left;
margin-bottom: 10px;
}
#Form1Layout br {
clear: both;
}
<div>
<div id="Form1Layout">
<label>User name:</label><input type="text" /><br>
<label>Address:</label><input type="text" /><br>
<label>Phone:</label><input type="text" /><br>
<label></label><button class="My_Button">Submit</button>
</div>
</div>
Use flexboxes for that. Here is a quick example.
(I intentionnaly increased the height of the inputs to show you how it works).
#Form1Layout {
font-family: Verdana;
font-size: 10pt;
margin-top: 10px;
text-align: center;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
#Form1Layout > div {
flex: 1 1 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 6px 0;
}
#Form1Layout label {
text-align: right;
padding-right: 10px;
width: 80px;
}
#Form1Layout input {
width: 300px;
height: 80px;
}
<div>
<div id="Form1Layout">
<div><label>User name:</label><input type="text" /></div>
<div><label>Address:</label><input type="text" /></div>
<div><label>Phone:</label><input type="text" /></div>
<div><label></label><button class="My_Button">Submit</button></div>
</div>
</div>
I'm creating a website, and I have a login-field that contains two inputs. I want to vertically align those items inside the DIV.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instagram tweaks</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<p>INSTATWEAKS</p>
</header>
<div class="loginbar">
<input type="text" name="username" id="username" class="input">
<input type="password" name="password" id="password" class="input">
</div>
</body>
</html>
And the CSS:
.loginbar {
width: 800px;
height: 400px;
box-sizing: border-box;
margin: auto auto;
display: block;
box-shadow: 0 0 10px black;
color: orange;
margin-top: 200px;
}
header {
width: 100%;
height: 50px;
text-align: center;
background-color: #111;
position: absolute;
top: 0;
}
body {
margin: 0;
padding: 0;
}
.input {
font-size: 22px;
vertical-align: text-top;
text-align: center;
}
p {
font-size: 30px;
color: lightblue;
margin-top: 10px;
font-weight: bold;
}
I want the inputs inside the div with the class 'loginbar' to be vertically centered
Use diplay: flex
https://codepen.io/Czeran/pen/mMWNwP
.loginbar {
width: 800px;
height: 400px;
box-sizing: border-box;
margin: auto auto;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px black;
color: orange;
margin-top: 200px;
}
You need to wrap your input fields in a container element, and then use flexbox to vertically align and center the container:
.loginbar {
display: flex;
align-items: center;
justify-content: center;
...
}
JSFiddle demo: https://jsfiddle.net/092215c2/1/
Since you have a set height for .loginbar, you could give it a line-height with the same value, then give .input { vertical-align: middle; }.
And just in case you want to horizontally align, add another div to your html around the two inputs. Give this div a set width, I went with 530px, that is about what the two inputs beside each other are, then give the div margin: 0 auto;
With this, the inputs are centered entirely.
Remove code to achieve what you want.
Best,
Levi
.loginbar {
width: 800px;
height: 400px;
box-sizing: border-box;
margin: auto auto;
display: block;
box-shadow: 0 0 10px black;
color: orange;
margin-top: 200px;
line-height: 400px;
}
header {
width: 100%;
height: 50px;
text-align: center;
background-color: #111;
position: absolute;
top: 0;
}
body {
margin: 0;
padding: 0;
}
.center {
width: 530px;
margin: 0 auto;
}
.input {
font-size: 22px;
text-align: center;
vertical-align: middle;
}
p {
font-size: 30px;
color: lightblue;
margin-top: 10px;
font-weight: bold;
}
<header>
<p>INSTATWEAKS</p>
</header>
<div class="loginbar">
<div class="center">
<input type="text" name="username" id="username" class="input">
<input type="password" name="password" id="password" class="input">
</div>
</div>
.textField-center {
margin: auto auto;
display: flex;
justify-content: center;
align-items: center;
}
OR
.textField-center {
justify-content: center;
}
USE This CSS
I am using my own classes and tags for HTML and CSS forms. I want to align the label text in middle.
I tried to use it using line height but it get messier when the text length is heavy.
and is it possible to use vertical align: middle; Because that's not even working
HTML :
<div class="type-details">
<div class="col-xs-12 no-padding text-group">
<span class="col-md-4 no-padding form-label">Placeholder:</span>
<div class="col-md-7 no-padding">
<input class="form-text" type="text">
</div>
</div>
</div>
CSS:
.type-details {
border-bottom: 1px solid #e9eef0;
padding: 20px;
width: 60%;
float: left;
}
.form-label {
float: left;
min-width: 17px;
font-size: 11px;
text-transform: uppercase;
color: #62696d;
margin-right: 15px;
}
.no-padding {
padding: 0px;
}
input.form-text {
background: #fff;
border: 1px solid #dae2e6;
font-size: 12px;
color: #62696d;
padding: 6px 8px;
box-shadow: none;
border-radius: 0;
line-height: normal;
display: inline-block;
width: 100%;
margin-bottom: 0px;
}
Check this fiddle https://jsfiddle.net/kuascjpo/2/ I want to align the span="form-label" vertically center
There are a few ways you can do this. Here is a fiddle: https://jsfiddle.net/sheriffderek/b9jg33b3/
Markup
<form action="" class="your-thing">
<label class="input-w">
<span class="label">First<br> name:</span>
<input type="text" placeholder='sheriff'>
</label>
<label class="input-w">
<span class="label">Last name:</span>
<input type="text" placeholder='derek'>
</label>
</form>
1. With display: inline-block;
The trick is that you need the element to be display inline-block. This way, you can use the vertical-align: middle; property of inline elements - and have the other properties of block elements too. Also, you don't want to use floats in this case. So,
.inline-block .input-w {
display: block; // to stack them
width: 100%;
}
.inline-block .label, .inline-block input {
/* float: none; you may need this to overide previous float rules */
display: inline-block;
vertical-align: middle;
}
2. The other way would be to use flexbox display: flex;
This involves a little more concern about the markup and the parent of these inputs.
.flex-box {
display: flex;
flex-direction: column;
}
.flex-box .input-w {
display: flex;
flex-direction: row;
}
They both have their strengths and side-affects. : )
A simple approach/hack that works is to wrap the text inside the <label></label> tags in <p></p> tags, at which point, the text-align: center; property will work to center the text.
label{
text-align: center;
}
<label><p>Your Text</p></label>
https://jsfiddle.net/cmckay/2xydfs87/
.text-group {
display:flex;
align-items:center;
}
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp