Aligning text vertically using vertical align css [duplicate] - html

Question

This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 6 years ago.
What the hell am I doing wrong haha.
I don't want to set the div's height because it should be set to auto depending on the image next to it. Am I using the tag wrong or something?
See my attached code.
Any help is greatly appreciated.
*{margin:0;padding:0;box-sizing:border-box;}
.hugme{margin:0 auto;max-width:947px;}
[class*=bit-]{float:left;padding:5px;}
#font-face {
font-family: 'Market Deco';
font-style: normal;
font-weight: normal;
src: local('Market Deco'), url('http://www.adambwhitten.com/obsw/Market_Deco.woff') format('woff');
}
/* Grids */
.box{background:#ed1b2e;font-family: 'Open Sans', sans-serif;font-size:14px;font-weight:700;text-align:center;padding:10px 0;}
.box-2{background:#00aabe;}
.bit-1{width:100%;}
.bit-2{width:50%;}
.bit-2-2{width:50%;}
.bit-3{width:33.33333%;}
.bit-4{width:25%;}
.bit-5{width:20%;}
.bit-6{width:16.66667%;}
.bit-7{width:14.28571%;}
.bit-8{width:12.5%;}
.bit-9{width:11.11111%;}
.bit-10{width:10%;}
.bit-11{width:9.09091%;}
.bit-12{width:8.33333%;}
.bit-25{width:25%;}
.bit-40{width:40%;}
.bit-60{width:60%;}
.bit-75{width:75%;}
.bit-35{width:35%;}
.bit-65{width:65%;}
.holdsmaller{max-width: 960px; margin: 0 auto;}
/* Buttons / Video Styles */
.holdbutton1 {
z-index:899;
margin: 10px;
}
.holdbutton2 {
z-index:899;
margin: 10px;
}
.holdbutton3 {
z-index:899;
margin: 10px;
}
.button-wrapper{
position:absolute;
width:100%;
height: 100%;
display:flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btnFall {
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
color: #ffffff;
width:200px;
font-size: 14px;
background: #772539;
padding: 10px 20px 10px 20px;
text-decoration: none;}
.btnFall:hover {
background: #959356;
text-decoration: none;
}
#media only screen and (max-width: 756px){
.button-wrapper{flex-direction: column;}
}
#cf {position:relative; width:100%; margin:0 auto;}
#cf img {position:absolute; left:0; width:100%; height:auto; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;}
#cf img.top:hover{opacity:0;}
.showmobile{display:none;}
/* Responsive Goodness */
/* Defaults above are set Desktop resolution or higher */
/* Laptop */
#media (min-width:50em) and (max-width:68.75em){
.bit-7,.bit-35,.bit-65{width:100%;}
.bit-10,.bit-12,.bit-4,.bit-8{width:50%;}
}
/* Tablet */
#media (min-width:30em) and (max-width:50em){
.bit-10,.bit-12,.bit-4,.bit-6,.bit-8{width:50%;}
.bit-1,.bit-11,.bit-3,.bit-5,.bit-7,.bit-9{width:100%;}
img.product {margin-top:43px;}
img.product2 {margin-top:56px;}
}
/* Mobile */
#media (max-width:30em){
.bit-4{width:50%;}
.bit-1,.bit-10,.bit-11,.bit-12,.bit-2,.bit-3,.bit-5,.bit-6,.bit-7,.bit-8,.bit-9{width:100%;}
#cf, img.product, img.product2, img.hidemobile, .button-wrapper {display:none;}
.showmobile {display:block;}
}
<div class="hugme">
<div class="bit-2">
<div class="inner" style="vertical-align:middle;">
<font style="font-family:'Market Deco'; font-size:50px; color:#772539;">BOOT UP</font><br>
<font style="font-size:18px; color:#000;">Short, tall, over the knee, or with plush touches.<br>This fall, take your pick.</font>
<div class="btnFall" style="text-align:center;">SHOP NOW ></div>
</div>
</div>
<div class="bit-2">
<div id="cf">
<a href="http://www.google.com/">
<img class="bottom" src="http://i.imgur.com/J3DOMlR.jpg" width="100%"/> <!-- hover -->
<img class="top" src="http://i.imgur.com/dMmmOz9.jpg" width="100%"/> <!-- static -->
</a>
</div>
</div>
</div>
Thanks guys and gals!

Answer 1

According to MDN, vertical-align is a property used for inline elements. I don't think it would work on a div.