Solved

css center page title

Posted on 2013-11-05
14
378 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Add box and text color changing for everything 1 34
How to show span when clicked on? 10 31
tiny glitch in my main slider 3 39
Insert Button on a table 16 37
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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 …

856 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