Zarovnání obrázků (malých a velkých) – CSS – Fórum – Programujte.com

Ahoj,

   mám takový menší problém. Vše mi funguje, až na jednu věc. Mám na stránce nějaké obrázky. Jsou zarovnány takto (vlevo):

	img{
  float: left;                         /* zarovnání obrázků */
  border: 2px solid rgb(0,102,0);      /* síla a barva rámečku okolo obrázků */
/*  	margin: 14px 10px 0 10px;   */
  }

Takto jsem docílil toho, že je i mezi obrázky je text a ne že je obrázek, vedle něj nic a potom zase text.

Jenomže když kliknu na menší obrázek v textu (náhled) tak se mi zvětší. Ale tento zvětšený obrázek je také zarovnán doleva. A to nechci. Chci aby velký obrázek byl zarovnán uprostřed, tak jak je to zvykem. Za obrázkem je lightbox (tma) a text kliknutím zavřete, který je v pořádku zarovnán na střed pomocí: text-align: center;

Kod css:

	  	div.lb {                /* vlastnosti lightboxu(tmy) */
	
    display: none;   
		height: 100%;      
		width: 100%;        
		position: absolute; 
		top: 0;  
		left: 0;
		right: 0;  
		bottom: 0;  
		text-align: center;
		
		padding-top: 30px;
		background: url(obr/lightbox.png);
	
	}
	div.lb:target {
     		display: block;
	}
	
	div.lb span {             /* vlastnosti nápisu vedle velkého obrázku */
		
		padding: 3px 100px;    
		background: #FFF;
		color: #ff6600;
		font-weight: bold; 
		}
		
		
	div.lb img {
		border: 8px solid #FFF;         /* síla a barva rámečku okolo velkých obrázků */
	  float: center;
  }

kod, kterým v html obrázky volám:

  <p>  <a href="#lightbox1"><img src="foto/01-nahled.jpg" alt="náhled" /></a> </p>  
   
      
   <div id="lightbox1" class="lb"> 
   <a href="#"><img src="foto/01.jpg" alt="detail v lightboxu"/><br /><span>kliknutím zavřete</span></a>
   </div> 

Jako laik jsem myslel, že zadám u menších obrázků float: left a u větších float: center. Ale to mi nějak nefunguje 

Třídy můžeš samozřejmě vytvořit rovnou i k obrázkům potom by si musel upravit kód CSS takto: 

.left {
  float: left;
}
.right {
  float: right;
}
.center {
  margin: 0px auto;
  text-align: center

a třídy vkládat jako nový atribut rovnou k tagu img:

<a href="#lightbox1"><img class="left" src="foto/01-nahled.jpg" alt="náhled" /></a> </p>