使用垂直对齐css垂直对齐文本

Question

我到底做错了什么哈哈。 我不想设置div的高度，因为它应该设置为auto，具体取决于它旁边的图像。我使用的标签是错误的吗？

请参阅我附带的代码。 非常感谢任何帮助。

*{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>

谢谢你们和女孩们！

Answer 1

根据MDN，vertical-align是用于内联元素的属性。我认为它不适用于div。