• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak wyświetlić tekst na środku zdjęcia?

Object Storage Arubacloud
0 głosów
468 wizyt
pytanie zadane 30 kwietnia 2020 w HTML i CSS przez tonn204 Mądrala (7,440 p.)
edycja 30 kwietnia 2020 przez tonn204

Tak jak pytaniu. Cały czas jak próbuje to tekst wyświetla się albo pod zdjęciem albo nad. Jak to naprawić?

HTML

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Naucz się programowania.</title>
    <meta name="description" content="html" />
	  <meta name="keywords" content="html,css" />
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="styleMain.css" type="text/css">
  </head>
  <body>
    <div id="container">
      <div id="menu">
        <div class="next_page">
          <a href="">Strona główna</a>
        </div>
        <div class="next_page">
          <a href="">HTML</a>
        </div>
        <div class="next_page">
            <a href="">CSS</a>
        </div>
        <div class="next_page">
            <a href="">Przydatne źródła</a>
        </div>
      </div>
      <div id="photo">
        <img src="img/code_photo.jpg" width="1360px" height="700px" style>
        HTML i CSS
      </div>
      <div id="content">
        <div class="text">

        </div>
      </div>
    </div>
  </body>
</html>

CSS:

body
{
  font-family: Verdana;
  margin-top: 0px;
}

#container
{
  width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

#menu
{
  width: 1400px;
  height: 80px;
  float: left;
  background-color: rgb(72, 75, 77);
}

.next_page
{
  font-size: 18px;
  height: 80px;
  padding-left: 25px;
  padding-top: 20px;
  color: white;
  float: left;
  text-align: left;
}

a
{
  color: white;
  text-decoration: none;
}

a:hover
{
  color: black;
}

#photo
{
  background-color: rgba(66, 68, 73, 0.86);
  width: 1360px;
  padding: 20px;
  float: left;
  text-align:
  color white;
}

#description
{
  position: absolute;
  text-align: center;
  color: white;
}

#content
{
  width: 1400px;

}

 

4 odpowiedzi

0 głosów
odpowiedź 30 kwietnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Najszybciej daj labelowi (lub innemu elementowi z tekstem) atrybut position: absolute;

 

0 głosów
odpowiedź 30 kwietnia 2020 przez jakub.parlej Obywatel (1,390 p.)
Możesz wstawić swój kod?
komentarz 30 kwietnia 2020 przez tonn204 Mądrala (7,440 p.)
już
komentarz 30 kwietnia 2020 przez jakub.parlej Obywatel (1,390 p.)
i który tekst ma być na środku zdjęcia?
komentarz 30 kwietnia 2020 przez tonn204 Mądrala (7,440 p.)
HTML i CSS
komentarz 30 kwietnia 2020 przez tonn204 Mądrala (7,440 p.)

@Jakub Parlej, I co?

komentarz 30 kwietnia 2020 przez jakub.parlej Obywatel (1,390 p.)

Jeśli chcesz aby tekst był dokładnie na środku twojego zdjęcia to zamiast wstawiać to zdjęcia za pomocą img ustaw po prostu w divie o id "photo" atrybut background image.

<div id="photo">
        <h2>HTML I CSS</h2>
</div>
#photo {
    background-image: url('img/code_photo.jpg');
}

#photo h2 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

 

0 głosów
odpowiedź 1 maja 2020 przez frostify Mądrala (5,640 p.)
0 głosów
odpowiedź 2 maja 2020 przez pablop76 VIP (123,120 p.)

Aby ustawić tekst na środku zdjęcia można nadać dla tekstu pozycje absolutną względem img. Oznacza to, że img musi mieć pozycje inna niż static np. relative. I wtedy mamy możliwość użyć właściwości top oraz left dla tekstu względem img.

<div id="photo" class="photo">
  <img src="https://banner2.cleanpng.com/20180822/alk/kisspng-logo-product-design-brand-data-stannum-technologies-custom-solutions-real-result-5b7d98a5f024f3.5383849615349577339836.jpg" width="100%" height="">
  <span class="photo_description">HTML i CSS</span>
</div>
.photo{
position: relative;
}
.photo_description{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #000;
font-size: calc(1vw + 1vh + 5vmin);
}

margin-right: -50%; jest wymagany, aby wyrównać parametr left: 50%, który zmniejsza o połowę dostępną dla elementu szerokość. Czyli jeżeli szerokość okna będzie mniejsza niż szerokość tekstu x2 to tekst nie będzie się zwijał.

Podobne pytania

0 głosów
0 odpowiedzi 221 wizyt
0 głosów
0 odpowiedzi 1,027 wizyt
pytanie zadane 6 stycznia 2019 w HTML i CSS przez Dogy Użytkownik (520 p.)
0 głosów
3 odpowiedzi 520 wizyt

92,555 zapytań

141,403 odpowiedzi

319,557 komentarzy

61,940 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...