Skocz do zawartości
Zaloguj się, aby obserwować  
azon

Tekst pomiędzy liniami <hr>

Recommended Posts

Witam,

Proszę o pomoc w jaki sposób zrealizować aby można było wpisać tekst pomiędzy liniami <hr> lub coś podobnego na wzór tego co przesyłam na załączonym obrazku,

 

 

hr.png

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Możesz linię ustawić jako tło nagłówka (wystarczy krótki odcinek rozciągnięty przez repeat-x) natomiast tekst obejmij dodatkowo znacznikami <span></span> i nadaj mu padding z tłem zasłaniającym linię. 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

albo w taki sposób:

<div style="width: 200px;  float: left"><hr></div> <div style="width: 300px; float: left; font-size: 30px;">TEKST POMIEDZY LINIAMI</div><div style="width: 200px;  float: left"><hr></div>

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Dnia 2.03.2020 o 16:36, Kamerzysta napisał:

albo w taki sposób:


<div style="width: 200px;  float: left"><hr></div> <div style="width: 300px; float: left; font-size: 30px;">TEKST POMIEDZY LINIAMI</div><div style="width: 200px;  float: left"><hr></div>

 

lepiej nie w taki sposób

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Cytat

Element <hr> reprezentuje zmianę tematu pomiędzy akapitami, np. zmiana sceny w powieści lub przejście do innego tematu w sekcji. W poprzednich wersjach HTML znacznik <hr> reprezentował poziomą linię. Niektóre przeglądarki nadal mogą wyświetlać go jako wypukłą lub wklęsłą linię, jednak ma on ściśle zdefiniowane semantyczne znaczenie i nie służy względom prezentacyjnym.

Rozwiązaniem może być użycie pseudo elementów

<h1 class="divider">Cechy i funkcje</h1>
.divider{
	position: relative;
	text-align: center;
}
.divider:before, 
.divider:after{
	content: "";
  	position: absolute;
  	top: 50%;
	width: 100%;
 	max-width: calc(50% - (260px / 2));
	right: 0;
  	border-bottom: 1px solid #000;
}
.divider:after{
	left: 0;
}

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Utwórz konto lub zaloguj się, aby skomentować

Musisz być użytkownikiem, aby dodać komentarz

Utwórz konto

Zarejestruj nowe konto na forum. To jest łatwe!

Zarejestruj nowe konto

Zaloguj się

Masz już konto? Zaloguj się.

Zaloguj się
Zaloguj się, aby obserwować  

×