.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>當我運行此代碼時，標題出現在頁面的中心。但是，我希望標題在段落上方居中。誰能幫我做到這一點？
uj5u.com熱心網友回復：
嘗試以下操作：
<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>uj5u.com熱心網友回復：
用一張桌子試試：
.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>希望我能幫助你；）
uj5u.com熱心網友回復：
使用彈性盒
我建議你放棄浮動并使用現代 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>uj5u.com熱心網友回復：
#center {
position:fixed
display: flex
text-align: center
}<div style="float: left;">
<p>Some Text</p>
<h1 id="center"> Title</h1>
</div>
<div style="float: right;">
<img src="image.png">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/440309.html
標籤：html
上一篇：onclick函式不執行