CODEWITHSUNDEEP
htmlcssalignment
tanaan
tanaan

Reputation: 85

Make heading center align

How to center <h3> in the following code?

h1 {
  color: #666;
  margin: 20px 10px 0px;
  padding: 0px 30px 0px 30px;
  text-align: center;
}

h3 {
  color: #ccc;
  background-color: black;
  margin: 0px;
  padding: 10px 10px 10px 10px;
  text-align: center;
  display: inline-block;
}
<div>
    <h1>title 1</h1>
    <h3>title 3</h3>
</div>

FIDDLE

Upvotes: 4

Views: 26539

Answers (5)

Giulio Bambini
Giulio Bambini

Reputation: 4755

Just apply this css property to the div i.e text-align:center;

like this 

<div style="text-align:center;">
    <h1>title 1</h1>
    <h3>title 3</h3>
</div>

Here is the example: https://jsfiddle.net/egv269x0/

Upvotes: 13

Kris
Kris

Reputation: 23

You can put it in a div and add style text-align: center. :)

Upvotes: 2

Alin N
Alin N

Reputation: 96

Apply this css to the h3:

h3 {
  color: #ccc;
  background-color: black;
  margin: 0px;
  padding: 10px 10px 10px 10px;
  //text-align: center;
  display: inline-block;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

The way you tried to do it doesn't work because when using display: inline-block; the element is not full-width anymore and text-align: center; centers the text according to the element's width.

Upvotes: 2

Ave
Ave

Reputation: 4430

You should add a class to <div> and style <div>.

Currently, you <div> like parent. Set text-align: center.

Example:

h1{
  color: #666;
  margin: 20px 10px 0px;
  padding: 0px 30px 0px 30px;
}

 h3 {
  color: #ccc;
  background-color: black;
  margin: 0px;
  padding: 10px 10px 10px 10px;
  display: inline-block;
}

.center {
  text-align: center;
}
<div class="center">
        <h1>title 1</h1>
        <h3>title 3</h3>
 </div>

Upvotes: 7

Victor Rocheron
Victor Rocheron

Reputation: 69

If you want to center title 3 : It work without display: inline-block; in css

Upvotes: 1

Related Questions