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>

＆＃13;

body {
  max-width: 8.5in
}

h1 {
  align: center;
  dispaly: flex;
}

img {
  float: left;
}

p {
  clear: both;
}

＆＃13;

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

＆＃13;

如果要在页面中心放置标题，则max-width属性会阻止它发生。只需删除它并使其成为中心

＆＃13;

body {
 
}

h1 {
  align: center;
  dispaly: flex;
}

img {
  float: left;
}

p {
  clear: both;
}

＆＃13;

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

＆＃13;

编辑：

根据您的需要现在它超过了该段的中心

＆＃13;

body {
  max-width: 8.5in
}

h1 {
  
text-align: center;
padding: 40px 0;  
position: relative;
}

img {
 position: absolute; 
}

p {
 padding-top:10px;
  clear: both;
  
}

＆＃13;

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

＆＃13;

如何将标题与图像旁边的中心对齐

1 个答案: