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

pytanie zadane 30 kwietnia 2020 w HTML i CSS przez tonn204 Mądrala (7,470 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

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

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,470 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,470 p.)

HTML i CSS

komentarz 30 kwietnia 2020 przez tonn204 Mądrala (7,470 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%);
}

odpowiedź 1 maja 2020 przez frostify Mądrala (5,640 p.)

odpowiedź 2 maja 2020 przez pablop76 VIP (123,540 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ł.