I am having trouble with centering the heading of a paragraph

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?

So are you saying that the paragraph doesn't use the whole width of the page? Because that's the reference for centering the title, of course. If that's the case, then you need the paragraph and title to be both in the same container, like a `div`. — Andrew, Mar 09 '22 at 11:22

score 1 · Answer 1 · edited Mar 09 '22 at 11:25

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>

edited Mar 09 '22 at 11:25

Andrew

7,602
2
34
42

answered Mar 09 '22 at 11:23

ziishaned

4,944
3
25
32

DreamTeK · Answer 2 · 2022-03-09T12:26:58.567

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>

score -1 · Answer 3 · edited Sep 20 '22 at 15:33

-1

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>

edited Sep 20 '22 at 15:33

Dharman

30,962
25
85
135

answered Mar 09 '22 at 11:22

ComputerJoshi

5
4

2

[don't use tables for layout](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – Pete Mar 09 '22 at 11:56

I am having trouble with centering the heading of a paragraph

3 Answers3

USE FLEXBOX