Autor Zpráva
Bildr
Profil
Mám div s pevnou šířkou, který obsahuje div s proměnou šířkou a nastaveným float:right. Situaci znázorňuje následující kód:

<div style="width:250px; height:50px; border:1px solid;">

  <div style="width:<?= rand(50,150) ?>px; height:50px; float:right; background:pink;">Content</div>

</div>


Potřeboval bych ten vnořený div zarovnat na střed. Přidat do sestavy ještě jeden div není problém, ale nenašel jsem řešení, které by fungovalo ve všech prohlížečích.

Nějaký nápad?
panther
Profil
Bildr
nemůže to být zarovnané na střed, když to má „float: right“
Bildr
Profil
nemůže to být zarovnané na střed, když to má „float: right““ >> „Přidat do sestavy ještě jeden div není problém
panther
Profil
Bildr
a teď mi řekni, čeho chceš docílit.. chceš to mít na středu (o centrování si najdi, řeší se to nejen tady často) nebo, aby to bylo vpravo (float: right)?

Jsou tu dvě pozice - centr a pravá strana, které se bijí, nic mezi tím není ;-)
Str4wberry
Profil
Proč tam vůbec je ten „float:right“. Z předložené ukázky se jeví jako zbytečný.
Bildr
Profil
kód je zjednodušený. těch divů tam je víc. tvořím jím stín pod obrázkem (odkazem), který se mění při mouse over.
panther
Profil
Bildr
kód je zjednodušený. těch divů tam je víc. tvořím jím stín pod obrázkem (odkazem), který se mění při mouse over.
to ale nemění nic na tom, že poukd chceš mít ten objekt centrovaný, float je tam navíc.
Str4wberry
Profil
Bildr:
kód je zjednodušený
Možná by bylo lepší, kdybys uvedl kód celý.
Bildr
Profil
CSS:

.pic-area1 {

  height: 120px;
  width: 128px;
  border: 1px solid black;  
  display: table;   
  text-align: center;
  #position: relative; 
  overflow: hidden;

}

.pic-area2 {

    #position: absolute; 
    #top: 50%;
    display: table-cell; 
    vertical-align: middle;
}
  
.pic-area3 {

    #position: relative; 
    #top: -50%; 
    #left: -50%; 
    width: 128px;
}

.pic-area3 a.shadow {
  
  float:right;
  display: block;
  background-color: #d0d1cb;

}

.pic-area3 a.shadow:hover {

  background-color: #97ce01;

}

.pic-area3 a.shadow img {

  display: block;
  position: relative;
  border: 1px solid #c0bcbb;
  margin: -3px 3px 3px -3px;

}


HTML:

         <div class="pic-area1">
           <div class="pic-area2">
             <div class="pic-area3">

               <a class="shadow" href="#"><img src="img.jpg" width="75" height="100" border="0" alt="." /></a>

             </div>
           </div>
        </div>

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: