我有顯示在頁面左側的 div，我想將它們顯示在頁面的中心，我還附上了我的 div 的屏幕截圖： $array = [ 'Summary' => [ 'data' => '<div align="center"style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div> <div class="page_summary"><br/> <div><h3 style="display: inline-block;width: 10%;" class="total_found">Total Files Found: '.$totalFind.'</h3></div> <div><h3 style="display: inline-block;width: 10%;" class="total_dir">Total Directories: '.$totalIsDir.'</h3><br/></div> <div><h3 style="display: inline-block;width: 10%;" class="planned_sync">Planned Sync Files: '.$totalShouldFind.'</h3></div> <div><h3 style="display: inline-block;width: 10%;" class="actual_sync">Actual Synced: '.$totalResolved.'</h3><br/></div/> <div><h3 style="display: inline-block;width: 10%;"class="missing_sync">Missing Synced Files: '.$forOfor.'</h3><div/>', 'colspan' => 5, 'class' => array('foo', 'bar'), ], ];和我的CSS： .page_sum{ width: 100px; height: 50px; display: inline-block; } .page_sum { /* Using drop shadow, should appear identical to box shadow */ -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75); background: #cccccc; }我剛剛粘貼了一個 div css，而不是將 div 置于中心，而是將文本顯示到 div 中的中心。如何讓我的 div 居中？還請找到我的屏幕。CSS： .page_sum{ width: 100px; height: 50px; display: inline-block; } .page_sum { /* Using drop shadow, should appear identical to box shadow */ -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75); background: #cccccc; } .summary-center { margin: auto; width: 50%; }和 HTML： '<div class="summary-center" style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div>
3 回答
天涯盡頭無女友
TA貢獻1831條經驗 獲得超9個贊
.page_sum如果您在 div和 div 中添加類 .summary-center ，.page_summary它應該可以工作。
.summary-center {
margin: auto;
width: 50%;
}
侃侃無極
TA貢獻2051條經驗 獲得超10個贊
嘗試這個：
<div class="page_summary summary-center">
<h1>Scan Summary:</h1>
<br/>
<div>
<h3 style="display: inline-block; width: 10%;" class="total_found page_sum">Total Files Found: XX</h3>
</div>
<div>
<h3 style="display: inline-block; width: 10%;" class="total_dir page_sum">Total Directories: XX</h3>
<br/>
</div>
<div>
<h3 style="display: inline-block; width: 10%;" class="planned_sync page_sum">Planned Sync Files: XX</h3>
</div>
<div>
<h3 style="display: inline-block; width: 10%;" class="actual_sync page_sum">Actual Synced: XX</h3>
<br/>
</div>
<div>
<h3 style="display: inline-block; width: 10%;"class="missing_sync page_sum">Missing Synced Files: XX</h3>
</div>
</div>
<style>
.page_sum {
/* Using drop shadow, should appear identical to box shadow */
-webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
background: #cccccc;
}
.summary-center {
margin: auto;
width: 50%;
text-align: center;
}
</style>
這看起來如下：
- 3 回答
- 0 關注
- 253 瀏覽
添加回答
舉報
0/150
提交
取消