Solved

css center page title

Posted on 2013-11-05
14
377 Views
Last Modified: 2013-11-05
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
Comment
Question by:isnoend2001
  • 7
  • 7
14 Comments
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39626249
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
 

Author Comment

by:isnoend2001
ID: 39626299
Thanks, but I have really only used tables for tabular data. been trying to stay away from tables
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39626337
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:isnoend2001
ID: 39626351
Thanks, but that didn't work unless i did something wrong.
http://roofgenius.com/test.htm
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39626356
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
 

Author Comment

by:isnoend2001
ID: 39626368
I had thought i did this is closer, but the google one button doesn't show
http://roofgenius.com/test.htm
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39626375
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
 

Author Comment

by:isnoend2001
ID: 39626383
Copied everything made no difference
http://roofgenius.com/test.htm
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39626384
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
 

Author Comment

by:isnoend2001
ID: 39626447
here is the page that shows then Google one button:
http://roofgenius.com/test2.htm
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39626461
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
 

Author Comment

by:isnoend2001
ID: 39626475
Almost
Google button is a little low and no space from between buttons.

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

Accepted Solution

by:
OmniUnlimited earned 500 total points
ID: 39626487
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
 

Author Closing Comment

by:isnoend2001
ID: 39626512
Looks good thanks for your help

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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
alert before form submission 6 40
Materializecss - Different Behaviors in Browser's 1 35
Little bit of help styling my heading 3 19
Sort Order Icons on HTML Table 3 23
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question