Why Is Vertical-Align: Middle Not Working on My Span or Div

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 middle not working in span element

You can use display: flex to achieve this.

span {  height: 150px;  width: 150px;  border: 1px solid black;  display: flex;  align-items: center;  justify-content: center;}

<span>center</span>

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).

vertical-align: middle not working on icon, span inside an anchor

.navItem {
  display: inline-flex;
  min-width: 56px;
  max-width: 82px;
  width: 33.3%;
  height: 56px;
  align-items: center;
  justify-content: center;

}

I used flexbox, see the updated fiddle below.

https://jsfiddle.net/qcpwev6e/

vertical align not working in div

Try these styles

#surnamediv {
   display: flex;
   align-items: center;
}
#surnamediv label {
    margin-left: 10px;
}

#surnamediv {  display: flex;  align-items: center;}
#surnamediv label {  margin-left: 10px;}

<div class="styled-input" id="surnamediv">  <input type="text" id="surName" /><button id="add" class="hidden">Add</button>  <label>Surname</label>  <span></span></div>

vertical align doesn't work on a span in a flexbox container

Per the MDN definition you posted for the span element:

The span HTML element is a generic inline container for phrasing content, which does not inherently represent anything.

True, the default display value of a span element is inline. But this value is overridden in a flex container.

All children of a flex container, regardless of their element type, are considered block elements.

From the flexbox spec:

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

Hence, vertical-align will not work on a span or any other "inline" element once they become flex items. Use flex alignment properties instead.

Why Is Vertical-Align: Middle Not Working on My Span or Div