Hey there I'm new to html. My problem is that I can't get my h3 heading to align. The h3 heading is in my body which has css code that centers the body. It aligns to the left and yet it should align to the center. I have saved both the html and css file and refreshed my browser. Here is the html code:

<body>
    
    
    <h1> 
        Blessed Be Blessings
    </h1>

<p class="width"> Hey there. What's up?</p>
<br>
<h3>Titanium Steel</h3>

<img src="file:C:/Users/Tam/Desktop/1.jpg">
  

</body>

Here is the css:

body{background-color: powderblue;}

p{color: white;}



body {text-align: center;}

h1 {border: solid 5px; background-color: white;}
h3{border-radius: 30px 30px 30px 30px; padding: 40; width: 200px; background-color: purple;}

CodePudding user response：

h3 is a block type tag. When you use the width, it is aligned to its 200px space but not to the body. So you have to use

h3 {
    margin:0px auto 
}

CodePudding user response：

display: inline-block;

body{background-color: powderblue;}

p{color: white;}



body {text-align: center;}

h1 {border: solid 5px; background-color: white;}
h3{border-radius: 30px 30px 30px 30px; padding: 40; width: 200px; background-color: purple;display:inline-block;}

<body>
    
    
    <h1> 
        Blessed Be Blessings
    </h1>

<p class="width"> Hey there. What's up?</p>
<br>
<h3>Titanium Steel</h3>
<br>
<img src="https://placekitten.com/640/360">
  

</body>

CodePudding user response：

You can wrap h3 inside a div and make that div a flexbox.

Please see below example

p {
  color: white;
}

body {
  text-align: center;
}

h1 {
  border: solid 5px;
  background-color: white;
}

h3 {
  border-radius: 30px 30px 30px 30px;
  padding: 40;
  width: 200px;
  background-color: purple;
  text-align: center;
}

.center-h3 {
  width: 100%;
  display: flex;
  justify-content: center;
}

<h1>
  Blessed Be Blessings
</h1>

<p class="width"> Hey there. What's up?</p>
<br>
<div class='center-h3'>
  <h3>Titanium Steel</h3>
</div>

CodePudding user response：

Blessed Be Blessings

Hey there. What's up?

Titanium Steel

body{background-color: powderblue;} p{ color: white; } body{ text-align: center; } h1 { border: solid 5px; background-color: white; } h3 { border-radius: 30px 30px 30px 30px; padding: 40; width: 200px; background-color: purple; margin-left: auto; margin-right: auto; }

CodePudding user response：

You can make use of the margin-left property to centre it.

body {
  background-color: powderblue;
  text-align: center;
}

p {
  color: white;
}

h1 {
  border: solid 5px;
  background-color: white;
}
h3 {
  margin-left: 40%;/*This value can be adjusted */
  border-radius: 30px 30px 30px 30px;
  /*padding: 40;*No padding unit provided so it will not make any changes*/
  width: 200px;
  background-color: purple;
}

<body>

  <h1>
    Blessed Be Blessings
  </h1>

  <p class="width"> Hey there. What's up?</p>
  <br>
  <h3>Titanium Steel</h3>

  <img src="file:C:/Users/Tam/Desktop/1.jpg" alt="img">

</body>