Centering two titles next to each other - html

Question

So I've been struggling with this for some while and the motive is just to learn but I simply want to center two <h2> titles next to each other. Preferably wrapping them in some sort of a container so that I simply can apply margin: 0 auto; Like:
<div>
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>

Answer 1

Here, check the snippet. You'll get both h2 centered.
.container{
text-align:center;
}
h2{
text-align:left;
display:inline-block;
}
<div class="container">
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>

Answer 2

A little different approach than Xahed, but working just as good
DEMO HERE:
http://jsfiddle.net/s0y9pg0L/
.container {
margin: 0 auto;
width:250px;
border: 1px solid red;
}
.centered-text {
text-align: center;
}
h2 {
display: inline-block;
}
with HTML
<div class="container">
<div class="centered-text">
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>
</div>
This is a little more proof if you're actually gonna use it in a website.

Answer 3

Simplest version I can think of is, very similar to the other ones posted (sorry).
If you do not want to affect all other h2s in the page, give the specific ones a class
h2{
display: inline-block;
}
.wrapper{
text-align: center;
}
<div class="wrapper">
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>

Answer 4

Here, I hope this helps. I think this is what you meant by center two h2 titles next to each other.
#wrapper {
width: 500px;
overflow: hidden;
border: 1px solid black;
margin: 0 auto
}
#title1 {
float:left;
width: 249px;
margin: 0 auto;
text-align: center;
}
#title2 {
overflow: hidden;
width: 249px;
text-align: center;
}
<div id="wrapper">
<div id="title1"><h2>Hello!</h2></div>
<div id="title2"><h2>Hello!</h2></div>
</div>