無法弄清楚如何將div居中到頁面

Question

我有兩個帶有彩色背景的文本塊。 我希望它們彼此相鄰，然后在頁面上水平居中，但是我無法讓它們在頁面上居中。 另外，我還必須使用內聯樣式，因為我只是在wordpress上進行工作編碼。 救命！

<div align="center">
<div style="background-color: #526f87; width: 60%; float: left; height: 160px; " >
<p style="font-size: 40px; color: #b9cbea; letter-spacing: 2px; line-height: 110%; padding-top: 20px; padding-right: 20px; text-align: right;">YOU'RE NEEDED AT THE TOP </p>
<p style="font-size: 40px; color: white; letter-spacing: 2px; line-height: 110%; padding-bottom: 20px; padding-right: 20px; text-align: right;" ><strong>MEET US THERE</strong>
</p>
</div>
<div style="background-color: #526f87; width: 20%; float: left; margin-left: 10px; height: 160px;">
<p style="color: #ffffff; font-size: 20px;" align="center">22 ICF CEUs <br /><span style="font-size: 12px;">(12.17 Core Competencies / 10.25 Resource Development)</span></p>
</div>
</div>

Answer 1

通常，您應該知道在頁面上有一個使div居中的技巧。 如果您想將某些內容居中，則知道其width是多少，對嗎？ 因此，您可以使用：

width: /* something */;
margin-left: auto;
margin-right: auto;

因此，對於您的代碼段，如果您不針對舊的瀏覽器，建議使用flex 。 我會做這樣的事情：

 <div style="display: flex; width: 80%; margin-left: auto; margin-right: auto;"> <div style="flex: 3">this is the larger div to the left</div> <div style="flex: 1">this is the one that should fall on the right</div> </div> 

注意：我的代碼與代碼中的代碼保持比例。