Alinhamento ao centro de blocos HTML sem largura definida

Enquanto o alinhamento centrado de um bloco, para o qual sabemos a sua largura, é relativamente simples via CSS com margens laterais definidas automaticamente (exemplo: margin-left: auto; margin-right: auto), já o mesmo alinhamento num bloco com largura variável requer um pequeno truque de CSS e HTML.

Então, como alinhar qualquer bloco ao centro?

HTML:

<div class="centered-block">
  <div class="outer-block">
    <div class="inner-block">
      <!-- bloco(s) a alinhar ao centro -->
    </div>
  </div>
  <div class="clear"></div>
</div>

CSS:

.outer-block, .inner-block {
  float: right;
  position: relative;
}
.outer-block {
  right: 50%;
}
.inner-block {
  right: -50%;
}
.clear {
  clear: both;
}

Exemplo:

Bloco DIV com width:auto para reset de largura
alinhado ao centro.

Versão mais recente do jQuery em Drupal

Por experiência própria, uma das maiores limitações do CMS Drupal a nível de interacção e UI prende-se com a utilização de uma versão antiga do jQuery. Relativamente ao Drupal 6, a versão de origem é a 1.2.6 e a alternativa mais usada consiste na utilização do módulo jQuery_Update, que permite avançar para a versão 1.3.2.

À data deste post, a versão actual do jQuery é a 1.6.4 que contém vários e importantes desenvolvimentos na biblioteca jQuery. Estar dependente de uma versão anterior limita, em muito, o potencial do jQuery fazendo cair por terra o ideal "write less, do more".

Posto isto, decidi deixar de usar o módulo jQuery_Update e passei a incluir nos meus projectos Drupal as versões mais recentes quer do jQuery, quer do jQuery UI. Para tal, basta editar o ficheiro template.php do vosso tema e coloquem/actualizem a função theme_preprocess() (onde theme é o nome do vosso tema) conforme indico em baixo:

function THEME_preprocess(&$vars, $hook) {
  //replace jquery for google js api in template pages
  if($hook == 'page') {
    if( ! in_array('page-admin', $vars['template_files'])
      AND ! in_array('page-batch', $vars['template_files']))
    {
      $vars['scripts'] = <<<JS
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script type="text/javascript">
          var jQueryU = jQuery;
          jQuery.noConflict(true);
        </script>
JS;

      // Get an array of all JavaScripts that have been added
      $javascript = drupal_add_js(NULL, NULL, 'header');

      // Rerender the block of JavaScripts
      $vars['scripts'] .= drupal_get_js(NULL, $javascript);
    }
  }
}

O que este código faz consiste em modificar os scripts do header do site por forma a, antes de carregar qualquer script, incluir as librarias jQuery e jQuery UI pretendidas. No exemplo, estou a descarregar as bibliotecas directamente dos repositórios da Google. De seguida, faço uso da função noConflict() do jQuery para, após guardar em jQueryU o actual jQuery carregado (1.6.3), libertar o objecto jQuery de quaisquer conflitos de nomenclatura. Por último adiciono ao container de scripts do Drupal, os originais scripts do header.

A partir deste ponto, sempre que precisar de usar o jQuery mais recente, posso faze-lo de duas maneiras distintas.

Exemplo 1 - Chamada directa a jQueryU

//index() foi introduzido na versão 1.4 do jQuery.
var index = jQueryU("#menu li.active").index();

Exemplo 2 - Utilização de $ como referencia a jQueryU

(function($) {
  $(function() {
    // código a usar $ como referencia para jQueryU (1.6.3)
  });
})(jQueryU);
// código a usar $ como referencia para jQuery (1.2.6)