Solved

css center page title

Posted on 2013-11-05
14
372 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
 

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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now