How do I center the header with it next to an image

Question

I would like to place the image next to header with the header centered over the paragraph and not centered between the image and the right side. using text-align:center will align the header between the image and the right side. I would like it centered above the paragraph with the image to the left of it. If possible I would like to do without adjusting the padding or adding unneeded elements.

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>

AVI · Accepted Answer · 2017-03-05T04:09:23.680

use text align center

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

and if you want to place header in page center, that max-width property blocks it happening. just remove it and make it center

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>

EDIT :

As per your need now it's over the paragraph's center

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>

using `text-align:center` centers the header between the image and the right margin. I would like it centered over the paragraph. — BrianC987, Mar 05 '17 at 03:58

How do I center the header with it next to an image

1 Answers1