我在将段落标题居中时遇到问题

Question

 .center { text-align: center }

 <h1 class="center">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?

Answer 1

Try with following:

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

Answer 2

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; }.p-wrap h1 { text-align: center; }.img-wrap { flex: 0; padding: 10px; }

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

Answer 3

Try it with a table:

 .center { text-align: center }

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