如何将图片中心标题放在图片旁边

我想将图片放置在标题旁边，图片标题位于段落中央，而图片和右侧图片不居中。使用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>

来源

2017-03-05 BrianC987

使用文本对齐中心

<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>

来源

2017-03-05 03:54:33 AVI

使用'text-align：center'使图像和右边距之间的标题居中。我希望它集中在该段落。 – BrianC987

@ BrianC987我编辑了答案 – AVI

如何将图片中心标题放在图片旁边

回答

相关问题