• 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?

VPS Starter Arubacloud
0 głosów
448 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,060 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 220 wizyt
0 głosów
0 odpowiedzi 1,017 wizyt
pytanie zadane 6 stycznia 2019 w HTML i CSS przez Dogy Użytkownik (520 p.)
0 głosów
3 odpowiedzi 513 wizyt

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...