我在將段落標題居中時遇到問題

Question

 .center { text-align: center }

 <h1 class="center">Title</h1> <div style="float: left;"> <p>Some Text</p> </div> <div style="float: right;"> <img src="image.png"> </div>

當我運行此代碼時，標題出現在頁面的中心。 但是，我希望標題在段落上方居中。 誰能幫我做到這一點？

Answer 1

嘗試以下操作：

 <div style="float: left;"> <h1 class="center">Title</h1> <div> <p>Some Text</p> </div> </div> <div style="float: right;"> <img src="image.png"> </div>

Answer 2

使用 FLEXBOX

我建議你放棄浮動並為 alignment 使用現代 flex-box。 你會發現控制的深度要大得多。

 .row-wrap { display: flex; }.p-wrap { flex: 1; flex-direction: column; }.p-wrap h1 { text-align: center; }.img-wrap { flex: 0; padding: 10px; }

 <div class="row-wrap"> <div class="p-wrap"> <h1>Title</h1> <p>Some Text</p> </div> <div class="img-wrap"> <img src="https://i.stack.imgur.com/jvyJq.jpg"> </div> </div>

Answer 3

用一張桌子試試：

 .center { text-align: center }

 <table> <tr> <td class="center"><h1>Your title</h1></td> </tr> <tr> <td><p>Your Paragraph</p><img src="image.png" style="float: right"></td> </tr> </table>