Make Heading Center Align

How to center

in the following code? FIDDLE

Solution 1:

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/

Solution 2:

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>
 

Solution 3:

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.

Solution 4:

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

Solution 5:

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