How to Vertically Center Align Background Image with Text

CSS background image on DIV's vertical center

To vertically center:

#con {
    background: url(image.jpg) no-repeat left center;
}

To horizontally center:

#con {
    background: url(image.jpg) no-repeat center top;
}

Vertically Center Text Over Background Div

I have documented the changes in CSS. Flexbox is used to position the page-container in the center. All floats are removed to keep the document flow intact.

More information on flexbox here.

html,body {  margin: 0;  padding: 0;}
.box {  width: 100%;  height: 700px;  background-color: #1F3AC5;  color: #fff;  /* float: left; REMOVED */  display: flex; /* Added */  align-items: center; /* Center vertically */}
.page-container {  width: 992px;  margin: 0 auto;}
.text1 {  /* float: left; REMOVED */  color: #fff;  background-color: rgba(0, 0, 0, 0.5);  text-transform: uppercase;  font-size: 20px;  padding: 20px;  line-height: 25px;}
.text2 {  /* clear: both;  float: left; REMOVED */  color: #fff;  text-shadow: 2px 2px 4px #000000;  font-size: 60px;  line-height: 65px;}

/*mobile*/
@media only screen and (max-width: 1200px) {  .box {    min-height: 475px;    height: calc(100vw / 1.714);  }}
@media only screen and (max-width: 992px) {  .box {    height: 475px;  }  .text1 {    font-size: 16px;    margin: 0 20px;  }  .text2 {    font-size: 40px;    margin: 0 20px;  }}

<div class="box">  <div class="page-container">    <div class="text1">Hello World</div>    <div class="text2">How are you?</div>  </div></div>

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

How do I align text vertically over a background image?

If the height of the image (or container) you are using is fixed, as in your example, then you can use a line-height method, as follows for the code in your example:

.image:after {
    line-height: 400px;
}

Add that line to the .image:after selector, and it will achieve what you want.

JSFiddle Example

Centering text over a background image

If you can use flexbox, then that'll make your life a little easier. More on that here -> https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

If not, vertically centering w/o hardcoding the value can be a little tricky. I generally use the trick mentioned in this CSS Tricks post (https://css-tricks.com/centering-in-the-unknown/)

If neither of those are working for you, I'd suggest you take a look at this other question, as there are plenty of solutions to try over there How do I vertically center text with CSS?

How to vertically align an image inside a div

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {    height: 25px;      /* Equals maximum image height */    width: 160px;    border: 1px solid red;    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
    text-align: center;    margin: 1em 0;}
.helper {    display: inline-block;    height: 100%;    vertical-align: middle;}
img {    background: #3A6F9A;    vertical-align: middle;    max-height: 25px;    max-width: 160px;}

<div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

How do I align multi line text vertically with background image set for :before

You can use display: flex on a element.

a {  align-items: center;  display: flex;  width: 300px;  border: 1px solid black;}
.submenu-icon:before {  content: "PSEUDO";  padding: 20px;}

<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services  </a>