vertical-align: middle doesn't work
You must wrap your element in a table-cell, within a table using display.
Like this:
<div>
<span class='twoline'>Two line text</span>
<span class='float'>Float right</span>
</div>
and
.float {
display: table-cell;
vertical-align: middle;
text-align: right;
}
.twoline {
width: 50px;
display: table-cell;
}
div {
display: table;
border: solid 1px blue;
width: 500px;
height: 100px;
}
Shown here: http://jsfiddle.net/e8ESb/7/
Why is vertical-align: middle not working on my span or div?
Using CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
use "justify-content: center;" to align elements horizontally
Note: This might not work in old IE's
vertical-align doesn't work
vertical-align is a slightly misnamed property and it's only vertically aligning inline elements, not blocks like you're probably expecting.
See this codepen I put together:
https://codepen.io/staypuftman/pen/OXzNRj
Broadly, there are two kinds of HTML elements: block-level elements and inline elements. You define them with display: block; and display: inline. Where beginners get confused is that they don't realize every element already has a display orientation defined by the browser.
The elements you are using, like <div>, <section>, etc are predefined as blocks, but some like <label> are inline. So you'd have to first make all of your element inline elements, but you'd find that doesn't work very well either.
The main way to do layouts in 2018 is with flexbox, which controls alignment on two axes very tightly. The main axis is controlled by the justify-content property and the secondary axis is controlled by the align-items property. By default, flexbox is oriented into rows so vertical control is handled with align-items: center; most of the time.
You set the display: flex; and the align-items: center properties on the container which contains the objects you're trying to vertically center. In your case thats <label class="form-check-input">, so the code would be:
.form-check-input {
display: flex;
align-items: center;
}
css vertical align middle doesn't work
You could also add line-height to center them. Just make sure the height and line-height are equal. See CSS vertical-align, how can I remove the little spacing below the text? for another dynamic example of the effect.
.parent{height:50px;line-height: 50px;background:gold;}
.checka, .radioa, .selecta{ display:inline-block;}<div class='parent'> <input type='checkbox' class='checka'> <input type='radio' class='radioa'>
<select class='selecta'> <option>lorem</option> <option>lorem</option> </select></div>vertical-align: middle doesn't work for me?
Use align-items: center; on the flex-container for that purpose.
.bgc-blue { background-color: #0066ff;}
.bgc-white { background-color: whitesmoke;}
.bgc-purple { background-color: purple;}
.bgc-green { background-color: rgb(70, 223, 70);}
.vertCenter-flex { display: flex; align-content: center; justify-content: center; align-items: center;}
.divmain { margin-top: 10px; display: inline-block; vertical-align: -webkit-baseline-middle; height: 95%;}
.centerItems { text-align: center;}
#topH { width: 100%; height: 95%;}
#offers { width: 40%; margin-left: 10px; margin-right: 10px; background: #fa0; height: 300px;}
#profileBox { width: 30%; height: fit-content;}
#news { width: 25%; background: #0fa; height: 300px;}<body> <div id="topH" class="vertCenter-flex"> <div id="profileBox" class="bgc-green divmain centerItems"> <p>p1</p> <p>p2</p> <p>lala</p> </div> <div id="offers" class="bgc-blue divmain">content</div> <div id="news" class="bgc-purple divmain">content</div> </div></body>vertical align middle wont vertical align middle when the div is a fixed height
You can use a line-height setting that is identical to the height of the container. This will vertically center the h1 without any further settings:
.fixed-height {
height: 100px;
background-color: green;
}
.fixed-height h1 {
font-size: 14px;
line-height: 100px;
color: red;
}<div class="fixed-height">
<h1>VERTICAL ALIGN ME</h1>
</div>Vertical Align Center not working for div text alignment
Your .v-middle elements inherit float from the col-.. elements, thats why you can't vertically align them. Simply add float: none to that class to fix it.
You will also have a problem with whitespaces in-between display: inline-block elements. A lot of ways to fix those, my favourite fix for those is adding font-size: 0 to parent.
Final code:
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<form class="order-form">
<div class="row first-row">
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order 123456789</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Date: 8/28/18</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Status: OP</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Ready Status: RD</span>
</div>
<div class="col-xs-12 col-sm-4 v-middle">
<span>Facility 123 Dudley Chip-N-Saw</span>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
$font-family: "roboto", "open-sans";
body {
font-family: $font-family;
padding-top: 5%;
.order-form {
text-align: center;
position: relative;
display: block;
label {
display: block;
}
.first-row {
font-size: 0;
.v-middle {
display: inline-block;
vertical-align: middle;
float: none;
font-size: 16px;
}
}
}
}
Also a small suggestion. Don't nest selectors that heavily (for ex. order-form doesn't need to be nested inside body).
Related Topics
How to Upload Multiple Files Using One File Input Element
What Do Square Brackets in Class Names Mean
Is It Correct to Use Div Inside Form
Chrome Auto Formats Input=Number
"Break-Inside: Avoid-Column" Doesn't Work in Firefox
Vertically Align Div (No Tables)
Convert HTML to Plain Text in Vba
Put Search Icon Near Textbox Using Bootstrap
Django Doesn't Display Newline Character When Rendering Text from Database
Changing Image Src Depending on Screen Size
What Is The 'Lang' Attribute of The <HTML> Tag Used For
Symetric Div with Background Image Without Clip-Path
Vertically Center and Left-Align a Column of Flex Items