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

Centrare i testi con CSS

Published on 11/7/2011
Categories: Web Design
Tags: CSS, HTML, Tutorials
Centrare i testi con CSS

Per centrare verticalmente un contenuto, si deve usare il seguente codice CSS

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

ed il seguente HTML

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

Il codice CSS però purtroppo non funziona con le versioni precedenti la 8 di Internet Explorer: bisogna aggiungere il seguente codice condizionale

[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]

Se si deve centrare anche orizzontalmente la tentazione sarebbe quella di usare la centratura del testo:

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

Purtroppo questo sistema funziona con tutti tranne che con Internet Explorer 6 e Internet Explorer 7.
La maniera corretta di farlo, per centrare ad esempio in una colonna di 500 pixel, è di modificare gli stili:

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,571.

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