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>
Related
My goal is to have a reusable number field with customizable increment/decrement buttons. However, my issue is that I cannot make the input field correctly fill the height of the container.
.wrapper {
height: 100px;
width: 100px;
display: flex;
flex-direction: row;
outline: auto;
outline-color: red;
}
input {
height: 100%;
width: 75%;
text-align: center;
}
.button-container {
width: 25%;
display: flex;
flex-direction: column;
}
button {
height: 50%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<div class="wrapper">
<input type="number">
<div class="button-container">
<button>+</button>
<button>-</button>
</div>
</div>
My results on the most recent version of Chrome:
I was unable to find any questions here addressing this specific issue. Any input would be appreciated.
All you need to do is remove the height from the input as shown below
.wrapper {
height: 100px;
width: 100px;
display: flex;
flex-direction: row;
outline: auto;
outline-color: red;
}
input {
width: 75%;
text-align: center;
}
.button-container {
width: 25%;
display: flex;
flex-direction: column;
}
button {
height: 50%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<div class="wrapper">
<input type="number">
<div class="button-container">
<button>+</button>
<button>-</button>
</div>
</div>
There're at leats 3 ways to achieve this:
make input's height: auto (which is the default) instead of height: 100%. Because it's default, you can just remove height: 100%
add box-sizing: border-box; for input
or manually, add border: 0; padding: 0; instead
Explanation:
From here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box
So height: 100% you declared to input is calculated as only the content part. Meanwhile, input has default padding and border, which added up and made your element look weird.
.wrapper {
height: 100px;
width: 100px;
display: flex;
flex-direction: row;
outline: auto;
outline-color: red;
}
input {
height: 100%; /* delete this */
box-sizing: border-box; /* or instead, add this */
border: 0; /* or these */
padding: 0;
width: 75%;
text-align: center;
}
.button-container {
width: 25%;
display: flex;
flex-direction: column;
}
button {
height: 50%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<div class="wrapper">
<input type="number">
<div class="button-container">
<button>+</button>
<button>-</button>
</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I'm trying to get one flex item to be centered vertically and horizontally.
I'd like for some text to be fixed to the bottom of the flex container.
margin-top:auto on the text just shoves the inner box to the top. Ideas?
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.container .box {
background: goldenrod;
height: 30px;
width: 30px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Here's the codepen.
Try the below instead:
.box {
background:goldenrod;
height: 30px;
width: 30px;
margin: auto;
}
Here is one way of doing it.
Add position: relative to your .container CSS rule, and then use absolute positioning on .box to position the span to the bottom of the parent container.
You can center the text by allowing .box to have 100% width and then using text-align: center.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
position: relative;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Since flexbox alignment involves the distribution of free space in the container, margin-top: auto won't work in this case because there's no counterweight on the other side.
Therefore, one method for centering the box and bottom-aligning the text involves creating a duplicate of the text element and placing it on the opposite side of the box. This will create a counterweight.
With equal balance on both ends, flex alignment properties (including auto margins) can work.
In this case, even justify-content: space-between would work.
Of course, you'll need to apply visibility: hidden to the duplicate element.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
margin: auto 0; /* or instead use justify-content: space-between on .container */
}
span:first-child {
visibility: hidden;
}
<div class="container">
<span>Text</span>
<div class="box"></div>
<span>Text</span>
</div>
OR, instead of a duplicate element, use a pseudo-element.
A less intrusive and more semantically proper method would use a pseudo-element as the duplicate. However, for this method to work, you would need to know the height of the actual element, because you would need to match it precisely.
Something like this will work to create equal balance:
.container::before {
content: "";
height: 15px; /* must match actual element's height */
}
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
height: 15px;
}
.container::before {
content: "";
height: 15px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
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
No matter how I style an element, none of the Flexbox styles I apply work. I have searched everywhere for a solution but could not find any (apologies if this is a duplicate as I could not find an answer to the problem).
I have created a CodePen here.
HTML:
<div class="test">
<div class="test2">
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
.test {
height: 10em;
width: 10em;
background: #333;
}
.test2 {
height: 2.5em;
width: 2.5em;
background: #ff0000;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
text-align: center;
}
Thanks in advance for any help provided.
You need to add those CSS rules to the parent element instead.
When you set display: flex on an element, its direct children elements become flexbox items. In your example, the .test2 elements didn't have any children elements, so I assume you were probably wanting to add display: flex on the parent element instead.
.test {
height: 10em;
width: 10em;
background: #333;
display: flex;
align-items: center;
justify-content: center;
}
.test2 {
height: 2.5em;
width: 2.5em;
background: #ff0000;
}
<div class="test">
<div class="test2"></div>
</div>
What is the correct way to force text in a div to vertically align to the middle?
I have found a couple 'tricks', but I need something that works with a single line and multiple lines. Hopefully I am missing something stupid simple:
http://jsfiddle.net/rogerguess/DawFy/
.header {
display: inline-block;
text-align: center;
width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
vertical-align: middle;
}
<div >
<div class="header">test1 </div>
<div class="header">some text that will wrap</div>
<div class="header">test3</div>
</div>
Change display: inline-block; to display: table-cell;
If your multi-line elements need to wrap for responsive reasons, then your best bet is with Flexbox. Due to the flakiness of Firefox's 2009 Flexbox implementation, it has to be handled slightly differently than you would do it for modern Flexbox implementations.
http://codepen.io/cimmanon/pen/mxuFa
<ul>
<li>One lorem ipsum dolor sit amet</li><!--
--><li>Two</li><!--
--><li>Three</li><!--
--><li>Four</li><!--
--><li>Five</li>
</ul>
li {
text-align: center;
vertical-align: middle;
/* fallback for non-Flexbox browsers */
display: inline-block;
/* Flexbox browsers */
display: -webkit-inline-box;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
/* vertical centering for legacy, horizontal centering for modern */
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
/* modern Flexbox only */
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
/* legacy Flexbox only */
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
}
I've made a quick example for you, using display: table-cell property on the parent div.
CSS:
.outer {
width: 500px;
height: 500px;
display: table-cell;
background-color: red;
vertical-align: middle;
}
.inner {
display: block;
width: 300px;
height: 200px;
margin: 0px auto;
background-color: yellow;
}
HTML:
<div class="outer">
<div class="inner">
</div>
</div>
http://jsfiddle.net/aKT42/
Try this, it will work.
<div class="greenBorder" id="outer">
<div id="middle">
<div class="greenBorder" id="inner">
Your Text Here
</div>
</div>
</div>
Css Class
#outer {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
display: table;
position: static;
}
div.greenBorder {
background-color: #39B9FF;
text-align: center;
color: white;
}
#middle[id] {
display: table-cell;
position: static;
vertical-align: middle;
width: 100%;
}
#middle {
position: absolute;
top: 50%;
}
http://jsfiddle.net/DawFy/16/
.header {
display: block;
text-align: center;
width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
margin:0px auto;
}
li
{
list-style-type:none;
}
<div >
<li>
<div class="header">test1 </div>
<li>
<div class="header">some text that will wrap</div>
<li>
<div class="header">test3</div>
Try this dont know if its "correct" but works
Most of these solutions wouldn't work for me because either the height was manually specified (which I couldn't do) or things like inline-block and float would remove the ability for the an inner div to inherit the parent div's height. I ended up creating a table with two columns each containing my divs and then I had no issues vertically centering text.