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 long time marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano

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

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.

Can engineering industry sponsor art without going off topic?

How to design a page in an exhibition catalog of Biennale in Venice, for a customer who apparently has nothing to do with art.

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!

Case study: TAV Engineering, branding for B2B services

How to create a brand that keeps distance from the cold and aseptic image of the metal industry, focusing instead on the human aspect.

Editor's pick

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.

How to dramatically increase social media LIKEs to your web site

Here's a free download that I created some time ago. It's a good tool for increasing engagement, but use with caution.
newsletter

Stay informed on digital strategies

RSS feed

Centrare i testi con CSS

Published on 11/7/2011
Categories: Web & Apps, Web Design
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 4,325.

Comments

comments powered by Disqus
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