Estou tentando exibir dois<div> elementos na mesma linha, mas no centro. Para centralizá-los, eu tive que definirmargin:auto; No entanto, para obter dois na mesma linha, eu tive que fazer qualquer um dos seguintes:

Setdisplay:inline; (que cancela a centralização)Setfloat:left; para ambos (que cancela a centralização)Setdisplay:table-cell; (que cancela a centralização)

O que posso fazer para obter os doisdivs estar no centro? Ou devo usar outra coisa para fazer isso? Eu tentei<span>, mas a propriedade inline faz o mesmo descrito acima para definirdisplay:inline;.

EDIT: Aqui está o CSS para o<div> elementos que estou tentando aplicar isso a:

.homediv {
    background-color:#F7F7F7;
    border:1px solid #FFFFFF;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    /* width must be defined in the actual element because it can have various sizes */
    -webkit-box-shadow: 0px 0px 8px #888888;
    -moz-box-shadow: 0px 0px 8px #888888;
    box-shadow: 0px 0px 8px #888888;
    margin:auto;
    text-align:center;
    padding:4px;
}

No arquivo HTML, adiciono apenas uma largura para cada elemento e agora estou tentando adicionar propriedades de exibição diferentes que corrigirão o problema. A idéia de "invólucro" sugerida abaixo parece ser a única solução, mas com esse CSS talvez haja algo que estou fazendo de errado?

EGUNDA EDIÇÃO: Como uma adição final, qual seria a melhor maneira de colocar espaço entre esses do<div> elementos, pois eles têm sombras de caixa e eu não quero que eles sejam esmagados junto