I am having trouble with centering the heading of a paragraph-CodePudding

.center {
    text-align: center
}

<h1 >Title</h1>
<div style="float: left;">
<p>Some Text</p>
</div>
<div style="float: right;">
<img src="image.png">
</div>

When I run this code the heading appears on the center of the page. However, I want the heading to center above the paragraph. Can anyone help me do this?

CodePudding user response：

Try with following:

  <div style="float: left;">
    <h1 >Title</h1>
    <div>
      <p>Some Text</p>
    </div>  
  </div>
  <div style="float: right;">
    <img src="image.png">
  </div>

CodePudding user response：

Try it with a table:

.center {
  text-align: center
 }

<table>
  <tr>
    <td ><h1>Your title</h1></td>
  </tr>
  <tr>
    <td><p>Your Paragraph</p><img src="image.png" style="float: right"></td>
  </tr>
</table>

Hope I could help you ;)

CodePudding user response：

#center {
    position:fixed
    display: flex
    text-align: center
}

<div style="float: left;">
<p>Some Text</p>
<h1 id="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Title</h1>
</div>
<div style="float: right;">
<img src="image.png">
</div>

CodePudding user response：

USE FLEXBOX

I recommend you ditch floats and use modern flex-box for alignment. You will find there is much greater depth of control.

.row-wrap {
  display: flex;
}

.p-wrap {
  flex: 1;
  flex-direction: column;
  text-align: center;
}

.img-wrap {
  flex: 0;
  padding: 10px;
}

<div >
  <div >
    <h1>Title</h1>
    <p>Some Text</p>
  </div>
  <div >
    <img src="https://i.stack.imgur.com/jvyJq.jpg">
  </div>
</div>