在顯示中心對齊img：內嵌塊元素

我正在使用全局類我有.total-center嘗試對齊圖像的中心位置bonus-left。出於某種原因，IMG會容器bonus-left外...在顯示中心對齊img：內嵌塊元素

有誰看到爲什麼我的形象是不bonus-left DIV中垂直居中？

.total-center { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    width: 100%; 
 
} 
 

 
#review-bonus { 
 
    width: 99%; 
 
    border: 1px solid #CDCDCD; 
 
    background: #F7F7F7; 
 
    margin: 30px auto; 
 
} 
 

 
#review-bonus-inner { 
 
    padding: 20px; 
 
} 
 

 
#bonus-left, 
 
#bonus-right { 
 
    display: inline-block; 
 
} 
 
#bonus-right { 
 
    width: 75%; 
 
} 
 

 
#bonus-left { 
 
    width: 25%; 
 
    position: relative; 
 
} 
 

 
#bonus-left img { 
 
    width: 60%; 
 
    height: auto; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div id="review-bonus"> 
 
    <div id="review-bonus-inner"> 
 
    <div id="bonus-left"> 
 
     <div class="total-center"><img src="http://www.iconarchive.com/download/i60915/himacchi/sweetbox/gift.ico"></div> 
 
    </div><div id="bonus-right"> 
 
     <h3 id="bonus-title">FREE</h3> 
 
     <p id="bonus-description">f jdkl fnjfn rweofnrfnfndafndffn ddfd fdhfanjk herowf fhrgfndfndf wfefnanf fefnf f hqaf hef fewh f hfewanf f aWFH F HWEEFNDNADS ANDJFDNF E </p> 
 
     <ul> 
 
     <li>g erj iroehgnvfd f nvjvhrnvjf nevj nvonvrfvnfvn envdvn nfereonovfnjofnvf oegnpvnfdonvfognoa</li> 
 
     <li>fndj iofgh rionrn ;nn oej rejbnvofn noe revofnoa;gvan</li> 
 
     <li>h trhth thwgh 4t ththhthtw th aregtrhw</li> 
 
     <li>htr htrh twh htrh thth twhtr hwht w</li> 
 
     <li>grtg regh htrw hthtthwhth tr th twhw hhttwhtrh w h</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-04 Paul

有幾件事情你需要了解CSS和HTML，瞭解我的調整：

瀏覽器實際上會渲染元素之間的空白。這就是爲什麼如果你的容器的寬度爲100％，而你的孩子的寬度爲25％，寬度爲75％，它就會包裝到下一行。如果您在父代和子代之間的HTML中刪除空格，則完全適合。
如果你不能刪除這個空格，你可能需要求助於使用float和「clearfix」破解。但是因爲我可以控制空白，所以我只會實現這種方式。
你不需要在圖像周圍包裝，只是爲了完全集中內容。這通常可以用CSS來完成。在我的調整中，我告訴IMG寬度：100％，並沒有打擾身高或位置。這個路線是留給父母的。
垂直對齊很棘手。在這種情況下，您需要將其視爲適用於父母的所有兄弟姐妹。我告訴了獎金左邊和獎金右邊，兩者都在中間垂直對齊，這意味着較高的會爲較短的一條提供指導。只給垂直對齊：中間的獎金左邊將默認爲垂直對齊：頂部獎金權利，這意味着獎金左中部將垂直對齊獎金右上方。棘手棘手。

#review-bonus { 
 
    width: 100%; 
 
    border: 1px solid #CDCDCD; 
 
    background: #F7F7F7; 
 
    margin: 30px auto; 
 
} 
 

 
#review-bonus-inner { 
 
    padding: 20px; 
 
} 
 

 
#bonus-left, 
 
#bonus-right { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
#bonus-right { 
 
    width: 75%; 
 
} 
 

 
#bonus-left { 
 
    width: 25%; 
 
} 
 

 
#bonus-left img { 
 
    width: 100%; 
 
}

<div id="review-bonus"> 
 
    <div id="review-bonus-inner"><div id="bonus-left"> 
 
     <img src="http://www.iconarchive.com/download/i60915/himacchi/sweetbox/gift.ico"> 
 
    </div><div id="bonus-right"> 
 
     <h3 id="bonus-title">FREE</h3> 
 
     <p id="bonus-description">f jdkl fnjfn rweofnrfnfndafndffn ddfd fdhfanjk herowf fhrgfndfndf wfefnanf fefnf f hqaf hef fewh f hfewanf f aWFH F HWEEFNDNADS ANDJFDNF E </p> 
 
     <ul> 
 
     <li>g erj iroehgnvfd f nvjvhrnvjf nevj nvonvrfvnfvn envdvn nfereonovfnjofnvf oegnpvnfdonvfognoa</li> 
 
     <li>fndj iofgh rionrn ;nn oej rejbnvofn noe revofnoa;gvan</li> 
 
     <li>h trhth thwgh 4t ththhthtw th aregtrhw</li> 
 
     <li>htr htrh twh htrh thth twhtr hwht w</li> 
 
     <li>grtg regh htrw hthtthwhth tr th twhw hhttwhtrh w h</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-04 20:56:16 Nate

謝謝！這個伎倆。 – Paul

增加對獎金左和獎金，右垂直對齊會解決此問題

#bonus-left, 
#bonus-right { 
    vertical-align: middle; 
    display: inline-block; 
}

您可能需要您的圖像上添加最大寬度爲好。在寬屏幕上它會過大而且溢出。

來源

2017-04-04 23:26:29

添加垂直對齊：頂部＃獎賞權將解決您的問題

#bonus-left { 
     width: 25%; 
     vertical-align: top; 
     position: relative; 
    }

試試這個

來源

2017-04-24 07:27:13

在顯示中心對齊img：內嵌塊元素

回答

相關問題