Faire un élément centré quand il est seul, mais aligné vers la droite quand il est avec un autre élément

Question

Nous avons une page qui a normalement deux éléments disposés côte à côte. En dépit d'explorer quelques angles pour cela, nous ne pouvons pas sembler le faire fonctionner. Nous ne sommes pas opposés à l'utilisation de JavaScript, nous pensons simplement qu'une solution basée sur CSS devrait être possible. Existe-t-il un moyen d'utiliser juste CSS (et peut-être un balisage supplémentaire si nécessaire) pour faire element2 centre quand il apparaît seul?

Exemples

Parfois, nous avons deux éléments, côte à côte.

<div id="container"> 
 
    <div id="element1">content</div> 
 
    <div id="element2">content</div> 
 
</div>

Mais dans certaines conditions seulement element2 est sur la page par exemple:

<div id="container"> 
 
    <div id="element2">content</div> 
 
</div>

Answer 1

Il y a une solution pure css, mais il ne sera pas travailler dans les versions de IE moins de 7, car il ne comprendra pas le soeur sel ector (+), pour cela, vous pouvez envisager une solution JavaScript (peut-être IE7 de Dean Edwards). Quoi qu'il en soit, quelques exemples css:

div#element2{ 
    width:100px; 
    margin:0 auto; 
} 
div#element1{ 
    width:50px; 
    float:left; 
} 
div#element1 + div#element2{ 
    width:50px; 
    float:left; 
    margin:0; 
} 

La clé est la ligne div # element1 + div # element2 qui sélectionne div # element2 étant donné qu'il suit directement div # element1.

Answer 2

Une solution CSS2 stricte:

#container { 
    text-align:center; 
} 
#element1, #element2 { 
    display:inline-block; 
} 

Les éléments internes comme du texte doit la mise en page en ligne à l'intérieur #container, mais restent à l'intérieur des blocs.

Ceci est CSS standard, mais obtenir la prise en charge du navigateur peut prendre some trickery.

Answer 3

ce n'est pas la solution fraîche becouse tables ne sont pas « tendance » plus mais il résout le problème completly (sous toutes-à-dire)

<style> 
    #container { 
     margin:0 auto; 
     width:100px; 
    } 

    #container table{ 
     width: 100%; 
     text-align:center; 
    } 

    #element1{ 
     background-color:#0000ff; 
    } 

    #element2 { 
     background-color: #ff0000; 
    } 
</style> 

<div id=container> 
    <table cellspacing=0 cellpadding=0> 
     <tr> 
      <td id="element1">content</td> 
      <td id="element2">content</td> 
     </tr> 
    </table> 
</div> 

Answer 4

Je pense que Phil était sur la bonne voie, mais vous devriez essayer d'utiliser le CSS last-child pseudo-classe. Pour autant que je sache, first-child et last-child sont le seul moyen en CSS pour se rapprocher d'une construction if.

div#container div#element2:last-child { 
    width:100px; 
    margin:0 auto; 
} 

div#element1{ 
    width:50px; 
    float:left; 
} 

div##element2{ 
    width:50px; 
    float:left; 
    margin:0; 
} 

Le CSS ci-dessus dit essentiellement « si element2 est le dernier élément enfant de son parent utilise cet ensemble de styles, sinon utiliser ces styles.

Cela devrait même travailler dans IE7.