Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Do your competitors are always ahead? - Raise your voice with web marketing!
  • HomeHome
  • About UsAbout Us
  • ContactsContacts

Blog

Take a software geek from the 80s, add a new generation graphic designer and dilute with a longtime marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano
Go to the blog summaryGo to the blog summary

You may be interested in

How to fix your ASP.NET site to be responsive on Windows Phone

How to fix your ASP.NET site to be responsive on Windows Phone

Internet Explorer 10 for Windows Phone 8 suffers a bug when displaying responsive web sites. See how to fix it server-side with few lines of code.

Dropdown menus with CSS

How to easily create dropdown menus using only CSS.

Last published

A simple but effective SEO strategy: the middleman

A simple but effective SEO strategy: the middleman

Get excellent results in a short time using this SEO trick. Lern how to quickly apply the middleman technique and have many new web pages indexed.

[FREE download] Keywords Mixer: long tail keywords made easy

There's a basic implementation inside Google AdWords Editor, but this tool will give you more control over permutations and long tail keywords.

Most popular

Lazy loading and the SEO problem, solved!

Lazy loading and the SEO problem, solved!

The best SEO solution to index your dynamically loaded contents, no more compromises!

Milano Design Week 2017, Design Districts

Ventura Lambrate and Tortona, here are the best creations that we discovered in the 2 districts of the Fuorisalone Milan Design Week 2017.

Editor's pick

Case study: branding and marketing for a magician

Case study: branding and marketing for a magician

Singular case study in the world of illusionism. See how we have created a brand and a web marketing campaign with exceptional results.
Mental marketing secret #1: the fake compromise

Mental marketing secret #1: the fake compromise

Can mentalism influence marketing? As a marketing professional and a long term magician, I will reveal you some tricks.
newsletter

Stay informed on digital strategies

Take a look at the last published articles
RSS feed

Centering text with CSS

Published on 11/7/2011
Categories: Web Design
Tags: CSS, HTML, Tutorials
Centering text with CSS

To center vertically a content, you have to use the following CSS code

div.vCenterWrapper
{
    height: 100%;
    display: table;
    overflow: hidden;
}
div.vCenterContainer
{
    display: table-cell;
    vertical-align: middle;
}
div.vCenterContent
{
}

and the following HTML code

<div class="vCenterWrapper">
    <div class="vCenterContainer">
        <div class="vCenterContent">
            ...
        </div>
    </div>
</div>

Unfortunately the CSS code doesn't work with Internet Explorer versions prior to the 8: you have to add the following conditional code

[if lt IE 8.]>
<style type="text/css">
    div.vCenterWrapper
    {
        position: relative;
    }
    div.vCenterContainer
    {
        position: absolute;
        top: 50%;
    }
    div.vCenterContent
    {
        position: relative;
        top: -50%;
    }
</style>
<![endif]

If you want to center horizontally too, the temptation would be to use the text centering:

<div class="vCenterWrapper" style="text-align:center;">
    <div class="vCenterContainer">
        <div class="vCenterContent">
            ...
        </div>
    </div>
</div>

Unfortunately this method works with all browsers, but not with Internet Explorer 6 and Internet Explorer 7.
The correct way to do it, to center for example a 500 pixels column, is to modify the styles:

div.vCenterWrapper
{
    height: 100%;
    width: 500px;
    display: table;
    overflow: hidden;
}
div.vCenterContainer
{
    display: table-cell;
    vertical-align: middle;
}
div.vCenterContent
{
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

You are the reader number 5,567.

Comments

Creative Commons License

Photographies, videos, graphics and texts by Idea R are licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Previous article

Previous article

Reflections on the water with Photoshop

Next article

JavaScript events? What a mess!

Next article
  • Visual Communication, Art DirectionVisual Communication, Art Direction
  • Apps, Cloud, Mobile, Software DesignApps, Cloud, Mobile, Software Design
  • Digital StrategiesDigital Strategies
  • BlogBlog
Touching finger
RSS feed
Blog

Scroll to top