0
我到底在做什麼錯了哈哈。 我不想設置div的高度，因爲它應該設置爲自動，具體取決於旁邊的圖像。我是否使用了錯誤的標籤？使用垂直對齊css垂直對齊文本
查看我附加的代碼。 任何幫助，不勝感激。
*{margin:0;padding:0;box-sizing:border-box;}
\t .hugme{margin:0 auto;max-width:947px;}
\t [class*=bit-]{float:left;padding:5px;}
\t
\t @font-face {
\t font-family: 'Market Deco';
\t font-style: normal;
\t font-weight: normal;
\t src: local('Market Deco'), url('http://www.adambwhitten.com/obsw/Market_Deco.woff') format('woff');
\t }
\t
\t /* Grids */
\t .box{background:#ed1b2e;font-family: 'Open Sans', sans-serif;font-size:14px;font-weight:700;text-align:center;padding:10px 0;}
\t .box-2{background:#00aabe;}
\t .bit-1{width:100%;}
\t .bit-2{width:50%;}
\t .bit-2-2{width:50%;}
\t .bit-3{width:33.33333%;}
\t .bit-4{width:25%;}
\t .bit-5{width:20%;}
\t .bit-6{width:16.66667%;}
\t .bit-7{width:14.28571%;}
\t .bit-8{width:12.5%;}
\t .bit-9{width:11.11111%;}
\t .bit-10{width:10%;}
\t .bit-11{width:9.09091%;}
\t .bit-12{width:8.33333%;}
\t .bit-25{width:25%;}
\t .bit-40{width:40%;}
\t .bit-60{width:60%;}
\t .bit-75{width:75%;}
\t .bit-35{width:35%;}
\t .bit-65{width:65%;}
.holdsmaller{max-width: 960px; margin: 0 auto;}
\t
\t /* Buttons/Video Styles */
\t .holdbutton1 {
\t z-index:899; \t
\t margin: 10px; \t
}
.holdbutton2 {
\t z-index:899;
margin: 10px;
}
.holdbutton3 {
\t 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 {
\t -webkit-border-radius: 5;
\t -moz-border-radius: 5;
\t border-radius: 5px;
\t color: #ffffff;
\t width:200px;
\t font-size: 14px;
\t background: #772539;
\t padding: 10px 20px 10px 20px;
\t text-decoration: none;}
\t .btnFall:hover {
\t background: #959356;
\t text-decoration: none;
}
@media only screen and (max-width: 756px){
.button-wrapper{flex-direction: column;}
}
\t
\t #cf {position:relative; width:100%; margin:0 auto;}
\t #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;}
\t #cf img.top:hover{opacity:0;}
\t .showmobile{display:none;}
\t
\t /* Responsive Goodness */
\t /* Defaults above are set Desktop resolution or higher */
\t
\t /* Laptop */
\t @media (min-width:50em) and (max-width:68.75em){
\t .bit-7,.bit-35,.bit-65{width:100%;}
\t .bit-10,.bit-12,.bit-4,.bit-8{width:50%;}
\t }
\t
\t /* Tablet */
\t @media (min-width:30em) and (max-width:50em){
\t .bit-10,.bit-12,.bit-4,.bit-6,.bit-8{width:50%;}
\t .bit-1,.bit-11,.bit-3,.bit-5,.bit-7,.bit-9{width:100%;}
\t img.product {margin-top:43px;}
\t img.product2 {margin-top:56px;}
\t }
\t
\t /* Mobile */
\t @media (max-width:30em){
.bit-4{width:50%;}
\t .bit-1,.bit-10,.bit-11,.bit-12,.bit-2,.bit-3,.bit-5,.bit-6,.bit-7,.bit-8,.bit-9{width:100%;}
\t #cf, img.product, img.product2, img.hidemobile, .button-wrapper {display:none;}
\t .showmobile {display:block;}
\t }<div class="hugme">
<div class="bit-2">
<div class="inner" style="vertical-align:middle;">
\t <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">
\t <a href="http://www.google.com/">
<img class="bottom" src="http://i.imgur.com/J3DOMlR.jpg" width="100%"/> <!-- hover -->
\t <img class="top" src="http://i.imgur.com/dMmmOz9.jpg" width="100%"/> <!-- static -->
</a>
\t </div>
</div>
</div>謝謝你們和女生！
請格式化您的代碼。閱讀目前的狀態非常困難。 – RamenChef
也''是一個過時的元素，不應該使用。 –