Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 389
  • Last Modified:

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
0
isnoend2001
Asked:
isnoend2001
  • 7
  • 7
1 Solution
 
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
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
OmniUnlimitedCommented:
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
 
isnoend2001Author Commented:
Looks good thanks for your help

http://roofgenius.com/test.htm
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 7
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now