css center page title

How can i center this text in the center of this page "Page title" in the division
both center left to right and top to bottom
http://roofgenius.com/test.htm
isnoend2001Asked:
Who is Participating?
 
OmniUnlimitedConnect With a Mentor Commented:
Ok, slight tweak then:

<div id="TitleBlock">
   <div style="float: left; width: 76px;"><a href="https://twitter.com/share" class="twitter-share-button" data-related="RoofInfo2013" data-lang="en" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
    <div style="float: left; width: 120px; margin: -17px 0 0 7px;">&nbsp;<div class="g-plusone" data-annotation="inline" data-width="30"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></div>
     <div style="float: left; width: 528px; height: 100%; position: relative;">
     <div class="medboldblue" style="position: absolute; top: 50%; margin-top: -10px; height: 16px; width: 528px;  text-align: center;">Page title</div>
     </div>
     <div style="float: left; width: 196px;">&nbsp; <!-- this div is just to balance the other side --></div> 
</div><br style="clear: left;" />  

Open in new window


You can also control positioning of these javascript beasts by placing them in an inner and outer containing div, setting the overflow on the outer containing div to hidden and the positioning to relative, and set the inner containing div positioning to absolute and adjust your top and left directives as needed.
0
 
OmniUnlimitedCommented:
I'm sure I will get a lot of flack for this, but when you are trying to center things both horizontally and vertically, I've always found that the use of tables is the easiest way of doing it.

This is your current HTML:
<div id="TitleBlock"><a href="https://twitter.com/share" class="twitter-share-button" data-related="RoofInfo2013" data-lang="en" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
 <!-- Place this tag where you want the +1 button to render. -->
 <div style="margin-left:5px; display: inline">
<div class="g-plusone" data-annotation="inline" data-width="40"></div>
</div><!--margin-left-->
<div style="text-align: center; margin-bottom 6px; display: inline;">
<span class="medboldblue">Page title</span>
</div><!--center-->

Open in new window


I would change it as follows:

<table style="border-collapse: collapse;"><tbody><tr>
   <td style="width: 76px;"><a href="https://twitter.com/share" class="twitter-share-button" data-related="RoofInfo2013" data-lang="en" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></td>
    <td style="width: 120px;"><!-- Place this tag where you want the +1 button to render. -->
 <div style="margin-left:5px; display: inline">
<div class="g-plusone" data-annotation="inline" data-width="40"></div>
</div><!--margin-left--></td>
     <td class="medboldblue" style="vertical-align: middle; text-align: center;">Page title</td>
     <td style="width: 120px;">&nbsp; <!-- this td is just to balance the other side --></td> 
     <td style="width: 76px;">&nbsp; <!-- this td is just to balance the other side --></td> 
</tr></tbody></table>

Open in new window


I put the CSS inline, but you can assign them to id's and classes if you want.
0
 
isnoend2001Author Commented:
Thanks, but I have really only used tables for tabular data. been trying to stay away from tables
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
OmniUnlimitedCommented:
Ok, you can do the same thing with div's.  Set your HTML as above like so:

<div id="TitleBlock">
   <div style="float: left; width: 76px;"><a href="https://twitter.com/share" class="twitter-share-button" data-related="RoofInfo2013" data-lang="en" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
    <div style="float: left; width: 120px;"><!-- Place this tag where you want the +1 button to render. -->
 <div style="margin-left:5px; display: inline">
<div class="g-plusone" data-annotation="inline" data-width="40"></div>
</div><!--margin-left--></div>
     <div class="medboldblue" style="float: left; display: table-cell; vertical-align: middle; text-align: center;">Page title</div>
     <div style="float: left; width: 196px;">&nbsp; <!-- this div is just to balance the other side --></div> 
</div><br style="clear: left;" /> 

Open in new window

0
 
isnoend2001Author Commented:
Thanks, but that didn't work unless i did something wrong.
http://roofgenius.com/test.htm
0
 
OmniUnlimitedCommented:
Hmm.  Something strange is going on with your Google+.  Javascript always messes with layouts.

Try this:

<div id="TitleBlock">
   <div style="float: left; width: 76px;"><a href="https://twitter.com/share" class="twitter-share-button" data-related="RoofInfo2013" data-lang="en" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
    <div style="float: left; width: 120px;">&nbsp;<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="40"></div>
</div>
     <div class="medboldblue" style="float: left; width: 528px; display: table-cell; vertical-align: middle; text-align: center;">Page title</div>
     <div style="float: left; width: 196px;">&nbsp; <!-- this div is just to balance the other side --></div> 
</div><br style="clear: left;" />

Open in new window


Make sure you copy everything, there are some subtle differences throughout.
0
 
isnoend2001Author Commented:
I had thought i did this is closer, but the google one button doesn't show
http://roofgenius.com/test.htm
0
 
OmniUnlimitedCommented:
OK, let's try this (once again, copy everything):

<div id="TitleBlock">
   <div style="float: left; width: 76px;"><a href="https://twitter.com/share" class="twitter-share-button" data-related="RoofInfo2013" data-lang="en" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
    <div style="float: left; width: 120px;"><div><!-- Place this tag where you want the +1 button to render. -->
 <div style="margin-left:5px; display: inline">
<div class="g-plusone" data-annotation="inline" data-width="40"></div>
</div><!--margin-left--></div>
</div>
     <div style="float: left; width: 528px; height: 100%; position: relative;">
     <div class="medboldblue" style="position: absolute; top: 50%; margin-top: -8px; height: 16px; width: 528px;  text-align: center;">Page title</div>
     <div style="float: left; width: 196px;">&nbsp; <!-- this div is just to balance the other side --></div> 
</div><br style="clear: left;" /> 

Open in new window

0
 
isnoend2001Author Commented:
Copied everything made no difference
http://roofgenius.com/test.htm
0
 
OmniUnlimitedCommented:
Hmm, the +1 coding is disappearing.  Are you sure you copied the coding exactly from your Google account?

The reason I ask is because based on what we have done so far, the following should display everything perfectly, minus the Google +1 button:

<div id="TitleBlock">
   <div style="float: left; width: 76px;"><a href="https://twitter.com/share" class="twitter-share-button" data-related="RoofInfo2013" data-lang="en" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
    <div style="float: left; width: 120px;">&nbsp;</div>
     <div style="float: left; width: 528px; height: 100%; position: relative;">
     <div class="medboldblue" style="position: absolute; top: 50%; margin-top: -10px; height: 16px; width: 528px;  text-align: center;">Page title</div>
     </div>
     <div style="float: left; width: 196px;">&nbsp; <!-- this div is just to balance the other side --></div> 
</div><br style="clear: left;" />

Open in new window

0
 
isnoend2001Author Commented:
here is the page that shows then Google one button:
http://roofgenius.com/test2.htm
0
 
OmniUnlimitedCommented:
Got it!  We were missing the Google javascript.  Ok, so now, try this:

<div id="TitleBlock">
   <div style="float: left; width: 76px;"><a href="https://twitter.com/share" class="twitter-share-button" data-related="RoofInfo2013" data-lang="en" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
    <div style="float: left; width: 120px;">&nbsp;<div class="g-plusone" data-annotation="inline" data-width="30"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></div>
     <div style="float: left; width: 528px; height: 100%; position: relative;">
     <div class="medboldblue" style="position: absolute; top: 50%; margin-top: -10px; height: 16px; width: 528px;  text-align: center;">Page title</div>
     </div>
     <div style="float: left; width: 196px;">&nbsp; <!-- this div is just to balance the other side --></div> 
</div><br style="clear: left;" /> 

Open in new window

0
 
isnoend2001Author Commented:
Almost
Google button is a little low and no space from between buttons.

http://roofgenius.com/test.htm
0
 
isnoend2001Author Commented:
Looks good thanks for your help

http://roofgenius.com/test.htm
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.