How to Vertically Align Text in Edit Box

How to vertically align text in input type=text?

Use padding to fake it since vertical-align doesn't work on text inputs.

jsFiddle example

CSS

.date-input {     
    width: 145px;
    padding-top: 80px;
}

How do I vertically center text with CSS?

You can try this basic approach:

div {  height: 100px;  line-height: 100px;  text-align: center;  border: 2px dashed #f69c55;}

<div>  Hello World!</div>

How to center align text horizontally and VERTICALLY in a box/container?

You don't need to complicate stuff using FlexBox. Please use something like this, a table layout or line-height and vertical-align combination:

.download {  font: Verdana, Helvetica, Arial, sans-serif;  color: RGB(112, 112, 112);  font-size: 18px;  text-align: center;  padding: 5px;}
.download:hover {  color: rgb(227, 111, 30);  cursor: pointer;}
#download-icon {  font-size: 80px;  vertical-align: middle;  line-height: 120px;}
#download-icon + span {  vertical-align: middle;  line-height: 1;}
.container-border {  border-style: solid;  border-color: rgb(0, 143, 197);  padding: 5px;  min-height: 120px;}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><div class="container">  <div class="row">    <div class="col-xs-4">      <div class="container-border">        <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>        <span class="download"> Download list of charities that have <b> not submitted </b> data yet </span>      </div>    </div>  </div></div>

Vertically align text within a div

Create a container for your text content, a span perhaps.

#column-content {  display: inline-block;}img {  vertical-align: middle;}span {  display: inline-block;  vertical-align: middle;}
/* for visual purposes */#column-content {  border: 1px solid red;  position: relative;}

<div id="column-content">
  <img src="http://i.imgur.com/WxW4B.png">  <span><strong>1234</strong>    yet another text content that should be centered vertically</span></div>

Centering text (vertically) inside a textbox using CSS

I wonder how you are able to align the text in a textbox but since you say, here is the suggestion:

For idiot IE, you can use this IE specific hack:

margin-top:50px; /* for standard-compliant browsers */
*margin-top:50px; /* for idiot IE */
_margin-top:50px; /* for idiot IE */

You might want to try other similar properties if you want rather than margin-top.

How do I vertically align text in a div?

The correct way to do this in modern browsers is to use Flexbox.

See this answer for details.

See below for some older ways that work in older browsers.

Vertical Centering in CSS

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Article summary:

For a CSS 2 browser, one can use display:table/display:table-cell to center content.

A sample is also available at JSFiddle:

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>