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>
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>