CSS: How can I center 2 elements next to each other (inline-block) only that share a container with other elements?

Question

I'm creating a userstyle for a website, so I can't change any HTML, just pure CSS.

<div class="container"></div>

   <divs>
   <h2s>
   <uls>
   <forms>
   <h3></h3>
   <p></p>

</div>

I want to make h3 and p be next to each other and in the horizontal center of the container. So, I gave both of them display:inline-block and text-align:center. That made them be next to each, but not horizonatly centered. text-align:center only works if it is applied to the container, but that would be centering all the text of the other elements of the entire site.

I'm relatively new to CSS and I've searched for a way to do this, but with no avail.

Answer 1

Try posting your code into a jsfiddle.

As far as i can understand, maybe only adding a margin on the h3 and p tags will be enough?

margin:0 auto;

Answer 2

If you use display:inline-block; you don't have to use any float attribute.

I'm guessing you mean that the text-align:center; made them centered horizontally. If you want them to be centered vertically you could use vertical-align:middle;

Answer 3

If you are okay with adding a new div you can try,

HTML

<div class = "container">
  <div class = "side_center">
    <h3>h3 element</h3>
    <p> p element </p>
    </div>
  </div>  

CSS

h3, p {
  display: inline-block;
}

.side_center {
  margin: 0px auto;
  display: table;
}  

However I reccomend that you style commonly used elements by adding a separate class or ID as not doing so may affect other h3 and p tags in your page. Here is the bin.

NEW EDIT

h3 {
      text-align: center;
      margin-left: -253px;
  }  

 p {
     margin-top: -22px;
     margin-right: -189px;
     text-align: center;
  }  

PS : this is in relation to your link only.