如何将图片中心标题放在图片旁边
问题描述:
我想将图片放置在标题旁边,图片标题位于段落*,而图片和右侧图片不居中。使用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>
答
使用文本对齐中心
<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>
使用'text-align:center'使图像和右边距之间的标题居中。我希望它集中在该段落。 – BrianC987
@ BrianC987我编辑了答案 – AVI