如何將圖片中心標題放在圖片旁邊

Question

我想將圖片放置在標題旁邊，圖片標題位於段落中央，而圖片和右側圖片不居中。使用text-align:center將對齊圖像和右側的標題。我希望它集中在段落的上方，圖片的左側。如果可能的話，我希望不用調整填充或添加不需要的元素。

body { 
 
    max-width: 8.5in 
 
} 
 

 
h1 { 
 
    align: center; 
 
    dispaly: flex; 
 
} 
 

 
img { 
 
    float: left; 
 
} 
 

 
p { 
 
    clear: both; 
 
}

<img src="//dummyimage.com/150"> 
 

 
<h1> header</h1> 
 

 
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>

Answer 1

使用文本對齊中心

<h1 style="text-align:center"> header</h1> 

body { 
 
    max-width: 8.5in 
 
} 
 

 
h1 { 
 
    align: center; 
 
    dispaly: flex; 
 
} 
 

 
img { 
 
    float: left; 
 
} 
 

 
p { 
 
    clear: both; 
 
}

<img src="//dummyimage.com/150"> 
 

 
<h1 style="text-align:center"> header</h1> 
 

 
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>

，如果你想將頁眉在頁面中心，即最大寬度屬性塊它正在發生。只是將其刪除，並使其居中

body { 
 
    
 
} 
 

 
h1 { 
 
    align: center; 
 
    dispaly: flex; 
 
} 
 

 
img { 
 
    float: left; 
 
} 
 

 
p { 
 
    clear: both; 
 
}

<img src="//dummyimage.com/150"> 
 

 
<h1 style="text-align:center"> header</h1> 
 

 
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>

編輯：

根據自己的需要，現在它已經結束了該段的中心

body { 
 
    max-width: 8.5in 
 
} 
 

 
h1 { 
 
    
 
text-align: center; 
 
padding: 40px 0; 
 
position: relative; 
 
} 
 

 
img { 
 
position: absolute; 
 
} 
 

 
p { 
 
padding-top:10px; 
 
    clear: both; 
 
    
 
}

<img src="//dummyimage.com/150"> 
 

 
<h1> header</h1> 
 

 
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>