| Autor | Zpráva | ||
|---|---|---|---|
| Bildr Profil |
#1 · Zasláno: 21. 3. 2009, 12:36:09
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 |
#2 · Zasláno: 21. 3. 2009, 12:53:23
Bildr
nemůže to být zarovnané na střed, když to má „float: right“ |
||
| Bildr Profil |
#3 · Zasláno: 21. 3. 2009, 12:58:21 · Upravil/a: Bildr
„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 |
#4 · Zasláno: 21. 3. 2009, 13:00:50
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 |
#5 · Zasláno: 21. 3. 2009, 13:02:35
Proč tam vůbec je ten „float:right“. Z předložené ukázky se jeví jako zbytečný.
|
||
| Bildr Profil |
#6 · Zasláno: 21. 3. 2009, 13:04:30
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 |
#7 · Zasláno: 21. 3. 2009, 13:06:18
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 |
#8 · Zasláno: 21. 3. 2009, 13:11:58
Bildr:
„kód je zjednodušený“ Možná by bylo lepší, kdybys uvedl kód celý. |
||
| Bildr Profil |
#9 · Zasláno: 21. 3. 2009, 13:16:57 · Upravil/a: Bildr
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>
|
||
|
Časová prodleva: 15 let
|
|||
0