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
Related
I need a clean way of placing the label below the text input field in the following fiddle. The label needs to be center aligned to the input
.scale-options {
margin-top: 56px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
width: 1100px;
}
.scale-yes,
.scale-no,
.scale-weight {
display: inline-flex;
justify-content: center;
}
.scale-yes,
.scale-no {
width: 313px;
}
.scale-weight input {
width: 233px;
display: block;
}
.scale-weight label {
text-transform: uppercase;
display: block;
position: relative;
}
<div class="scale-options">
<div class="scale-yes">
<Button>yes</Button>
</div>
<div class="scale-weight">
<input type="text" name="scaleWeight" value="24.5kg" disabled>
<label for="scaleWeight" class="scale-weight-label">12.5</label>
</div>
<div class="scale-no">
<Button>no</Button>
</div>
</div>
https://jsfiddle.net/chalcrow/wzpduq2h/3/
I've tried a number of ways of doing it, like setting display:block for both the input and label, and using clear: both on both elements. I've also tried a positioning hack by setting the relative position of the label, but it breaks parts of the other layout for some reason. I've also tried setting heights and widths for the input and label and tried the suggestion here https://stackoverflow.com/a/3463670/1549918 (there are other suggested answers on that question - I looked at them all and they're either too hacky or aren't working when I try them)
The issue is, that you declared display: inline-flex for .scale-weight and as such use flexbox with the default flex-direction: row Just remove the class selector from the list where you declare flexbox on it. After that you can align the text of the label with text-align: center;
.scale-options {
margin-top: 56px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
}
.scale-yes,
.scale-no /* , *//* removed */
/* .scale-weight *//* removed */ {
display: inline-flex;
justify-content: center;
}
.scale-yes,
.scale-no
{
width: 313px;
}
.scale-weight input {
width: 233px;
display: block;
}
.scale-weight label {
text-transform: uppercase;
display: block;
/* position: relative; *//* removed as it doesn't do anything and has no absolute child */
text-align: center; /* added */
}
<div class="scale-options">
<div class="scale-yes">
<Button>yes</Button>
</div>
<div class="scale-weight">
<input type="text" name="scaleWeight" value="24.5kg" disabled>
<label for="scaleWeight" class="scale-weight-label">12.5</label>
</div>
<div class="scale-no">
<Button>no</Button>
</div>
</div>
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 -->
please see the jsfiddle project here . How to horizontally align the box and the label?
.box {
display: inline-block;
height: 20px;
width: 30px;
border: 1px solid;
}
.legend {
horizontal-align: middle;
}
<div class="legend">
<div class="box" style="background-color: red;">
</div>
<span>Alabama</span>
</div>
I assume you mean vertically align? If you are simply trying to align, vertically, two div of unequal height then display: inline-block is the simplest and most effective method. You almost had it with your code, but float breaks it. Don't use float!
.box {
background-color: red;
border: 1px solid;
height: 20px;
width: 30px;
}
.box,
.legend {
display: inline-block;
vertical-align: middle;
}
<div class="box"></div>
<div class="legend">Alabama</div>
enter link description here
Setting the vertical-align property on the .box div would seem to make the most sense and cause the least issues.
.box {
display: inline-block;
height: 20px;
width: 30px;
border: 1px solid;
vertical-align: middle;
}
<div class="legend">
<div class="box" style="background-color: red;">
</div>
<span>Alabama</span>
</div>
You can float the box instead of displaying it inline. There's a couple different ways to align these.
https://jsfiddle.net/cckxkvov/5/
.box {
float: left;
height: 20px;
width: 30px;
border: 1px solid;
}
.legend {
horizontal-align: middle;
}
span {
display: inline-block;
line-height: 20px;
}
Why not use flexbox?
If you're trying to vertically align the two items within .legend then just apply these styles:
.legend {
display: flex;
align-items: center;
}
Keep in mind you will need to apply prefixes for cross-browser compatibility.
Here's what I've got so far:
http://codepen.io/anon/pen/jPQjMZ
HTML:
<div class="container">
<div class="info">
This Is Info
</div>
</div>
<div class="container">
<div class="info">
This Is More Info
</div>
</div>
CSS: (LESS)
body {
background: #000;
}
.container {
background: #eee;
width: 150px;
height: 200px;
display: inline-block;
vertical-align: top;
}
.info {
background: #404040;
color: #fff;
display: flex;
display: -ms-flexbox;
align-items: center;
-ms-align-items: center;
font-size: 1.4em;
padding: 1em;
text-align: center;
height: 20px;
//overflow: hidden;
}
This works great in Chrome and Firefox. But in IE10, the text fails to wrap:
What's going on and how do I fix this? I don't necessarily have to use flexbox, but it's the only way I could figure out how to center the text perfectly within the div whether it's one line or two.
If you wrap your info text in an extra <span>, you can use the double line-height trick from this other question to vertically center the text (without using flexbox):
How do I vertically align something inside a span tag?
Note: I had to remove the vertical padding and instead set the total height to 3em
.info {
background: #404040;
color: #fff;
font-size: 1.4em;
padding: 0 1em;
/*height: 3em;*/
line-height: 3em;
text-align: center;
}
.info span {
display: inline-block;
line-height: 1em;
vertical-align: middle;
}
Updated Pen: http://codepen.io/anon/pen/aOQegy
I want to have the input fields vertically centered inside each div viz. color-1 color-2 color-3
Using vertical-align: middle either in each div or input is not working.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
input[type="text"] {
width:150px;
height: 30px;
text-align: center;
}
#color-1 {
height: 33%;
background: {{yourName}};
text-align: center;
vertical-align: middle;
}
#color-2{
height: 33%;
background: {{color_2}};
text-align: center;
vertical-align: middle;
}
#color-3{
height: 33%;
background: {{color_3}};
text-align: center;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div id="color-1">
<input type="text" ng-model="color_1" placeholder="Enter Color #1">
<h1>{{color_1}}</h1>
</div>
<div id="color-2">
<input type="text" ng-model="color_2" placeholder="Enter Color #2">
<h1>{{color_2}}</h1>
</div>
<div id="color-3">
<input type="text" ng-model="color_3" placeholder="Enter Color #3">
<h1>{{color_3}}</h1>
</div>
You can do this in two ways using display:flex or using display:table,display:table-row and display:table-cell which you need to wrap in another div.
Using display:flex is better in which you no need to wrap template in another div
Add the class color for all the color divs
Style of 'color' class
.color{
height:33%;
display: flex;
justify-content: center;
align-items:center;
}
For more info refer this https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I had made demo
#color-1
{
height: 33%;
background: {{yourName}};
vertical-align: top;
background: red;
display: flex;
justify-content: center;
flex-direction: column;
}
and make divs
align="center"