Text-align nie działa do końca poprawnie w mozilli, na chromie jest ok

2018-10-30 21:08
0

Czy jest mi ktoś w stanie pomóc w tym problemie?

<div class="pierwszyDiv">
       <div class="drugiDiv">
                  <img src="smiley.gif" alt="Smiley face" height="42" width="42">
       </div>
</div>

Style do tego:

.pierwszyDiv {
    position: absolute;
    top: 0px;
    height: 70px;
   width: 150px;
}

.drugiDiv {
    text-align: right;
}

Dlaczego w przypadku przeglądarki chrome wszystko działa ok i obrazek za pomocą text-align jest przesuniety maksymalnie do prawej strony diva. Natomiast w przypadku firefox co prawda ten obrazek przesunął się trochę w prawo stronę, ale nie maksymalnie do prawej strony diva.

edytowany 3x, ostatnio: kaczor19, 2018-10-30 21:09

Pozostało 580 znaków

2018-10-30 21:19
0

Może jest coś źle w pozostałej części kodu?
Bo ten kod wyrównuje poprawnie treść do prawej strony bloku div.

divalignright.jpg

Pozostało 580 znaków

2018-10-30 21:20
0

W sumie nad tymi divami jest jeszcze jeden nadrzędny div z takimi stylami:

.divNadrzedny {
    width: 280px;
    height: 280px;
    margin-right: 16px;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
}

Pozostało 580 znaków

2018-10-30 21:30
0

Działa nadal na Firefox.
Chyba, że chcesz wyrównać obrazek do prawej krawędzi tego diva, który ma czerwone tło na rysunku poniżej.

div_align_3.jpg

Pozostało 580 znaków

2018-10-30 21:33
0

Tak chcę wyrównać obrazek do prawej krawędzi tego diva, który ma czerwone tło na rysunku

Pozostało 580 znaków

2018-10-30 21:34
1
kaczor19 napisał(a):

chcę wyrównać obrazek do prawej krawędzi tego diva, który ma czerwone tło na rysunku

To umieść obrazek w tym czerwonym bloku div :)

div_align_4.jpg

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightgreen; }
.divNadrzedny {
    width: 280px;
    height: 280px;
    margin-right: 16px;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
    background-color: #FF0000; /* !!! */
}
.pierwszyDiv { position: absolute;
    top: 0px;
    height: 70px;
    width: 150px;
    background-color: #000000; }
.drugiDiv { text-align: right; }
</style>
</head>
<body>
<div class="divNadrzedny">
  <div class="pierwszyDiv">

  </div>
  <div class="drugiDiv">
      <img src="http://placehold.it/42x42" alt="Smiley face" height="42" width="42">
    </div>
</div>
</body>
</html>
edytowany 3x, ostatnio: vxer, 2018-10-30 21:36

Pozostało 580 znaków

2018-10-30 21:37
0

Zapomniałem dodać, że im ma taki styl:

img {
 zoom: 65%;
        -moz-transform: scale(0.65);
}

Chyba przez to mi nie wyrównuje do końca do prawej strony tego obrazka na firefoxie.

Pozostało 580 znaków

2018-10-30 21:39
0
kaczor19 napisał(a):
img {
 zoom: 65%;
        -moz-transform: scale(0.65);
}

Chyba przez to mi nie wyrównuje do końca do prawej strony tego obrazka na firefoxie.

Zgadzam się. To przez to skalowanie obrazek ma odstęp od krawędzi bloku div.

Pozostało 580 znaków

2018-10-30 21:40
0
vxer napisał(a):
kaczor19 napisał(a):
img {
 zoom: 65%;
        -moz-transform: scale(0.65);
}

Chyba przez to mi nie wyrównuje do końca do prawej strony tego obrazka na firefoxie.

Zgadzam się. To przez to skalowanie obrazek ma odstęp od krawędzi bloku div.

Czy w takim przypadku da się jakoś tak zrobić aby w przypadku chrome i firefoxa obrazek przylegał do prawej krawędzi diva?

Pozostało 580 znaków

2018-10-30 21:44
0

Można zrobić:

img {
    zoom: 65%;
    -moz-transform: scale(0.65);
    margin-right: -7px;
    margin-top: -7px;
}

Działa, ale to trochę obejście. Może lepiej zmniejszyć ten obrazek w edytorze graficznym, niż skalować go kodem.

Za łapkę przy poście w jednej z pięciu odpowiedzi bym się też nie obraził ;)

Pozostało 580 znaków

2018-10-30 22:00
0
vxer napisał(a):

Można zrobić:

img {
    zoom: 65%;
    -moz-transform: scale(0.65);
    margin-right: -7px;
    margin-top: -7px;
}

Działa, ale to trochę obejście. Może lepiej zmniejszyć ten obrazek w edytorze graficznym, niż skalować go kodem.

Za łapkę przy poście w jednej z pięciu odpowiedzi bym się też nie obraził ;)

To nie zadziała, bo marginesy przecież na obu przeglądarkach się zmienia a nie na firefoxie tylko.

Pozostało 580 znaków

Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0