1

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.

user3926061
  • 13
  • 1
  • 6

3 Answers3

1

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.

Thomas Sebastian
  • 1,582
  • 5
  • 18
  • 38
  • I can't add an element, I'm doing an userstyle. I can only try with CSS. – user3926061 Aug 10 '14 at 01:26
  • in that case, you can use position: relative; left:x%; where x is an integer, and tweak using media query for various resolutions. Otherwise you'll have to center the container div itself. You have an unclosed div tag. Close it. – Thomas Sebastian Aug 10 '14 at 01:43
  • I have tweaked your site and got these to bring them to center. See my new edit section in the answer. – Thomas Sebastian Aug 10 '14 at 01:57
  • It brings them to the center, but it is not practical since "p" gets wider as the more users are browsing the forums. – user3926061 Aug 10 '14 at 02:09
  • Then instead of complicating things(since you are doing userstyle), I suggest that you text-align both of them to center and place them one after the other. That looks good too. :P At least until to find a solution. – Thomas Sebastian Aug 10 '14 at 02:19
  • What I've been doing for now is adding text-align:center to the container and adding text-align:left to all the other elements inside. – user3926061 Aug 10 '14 at 02:23
  • That will be like breaking 1000 lines of css code to fix one. I think that is an overkill. – Thomas Sebastian Aug 10 '14 at 02:33
  • I did it with just 8 selectors. – user3926061 Aug 10 '14 at 02:36
0

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;

BBQ.
  • 169
  • 11
  • I'm trying to recreate the code there, but display:inline-block there doesn't make them be next to each other. I even tried making them float to the left, but that isn't working either. Your margin suggestion didn't work D: – user3926061 Aug 10 '14 at 01:05
  • And you can't just keep the container around it? As that would help you to center the elements; http://jsfiddle.net/45qpu0c2/2/ – BBQ. Aug 10 '14 at 01:33
  • h3 and p aren't next to each other there. – user3926061 Aug 10 '14 at 01:49
  • Your solution is obviously working in jsfiddle, but for some reasom that I can't find, it isn't working for the website D: – user3926061 Aug 10 '14 at 02:14
  • That's strange, cause i used the code of that website.. just stripped it down to have only the elements needed. – BBQ. Aug 10 '14 at 02:21
0

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;

Ljungren
  • 177
  • 11
  • I removed the float attribute but it still doesn't work. I mean I want them horizontally centered. – user3926061 Aug 10 '14 at 00:57
  • If you could please supply us with a concrete example it would be easier to assist you in solving the problem. And by concrete example I mean posting the complete html and css :) – Ljungren Aug 10 '14 at 01:04
  • The complete html is this website [link](http://www.truewow.org/forum/viewforum.php?f=50). The CSS I'm making for the forum elements only is this: [link](http://jsfiddle.net/45qpu0c2/) It is the bottom part of the forum, Who is online and the following paragraph that I want to apply this to. The selector that I have for it in the CSS is this:.navbar.panel + h3 and the next one. I tried to put a basic example in jsfiddle, but display:inline-block wasn't making h3 and p be next to each other. – user3926061 Aug 10 '14 at 01:19