Zastanawiam się, jakie opcje ma jeden w xhtml 1.0 strict, aby utworzyć linię po obu stronach tekstu w podobny sposób:
Sekcja pierwsza ----------------------- Następna sekcja ----------------------- Sekcja druga
Myślałem o zrobieniu takich fantazyjnych rzeczy:
<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section
Lub alternatywnie, ponieważ powyższe ma problemy z wyrównaniem (zarówno w pionie, jak i w poziomie):
<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>
Ma to również problemy z wyrównaniem, które rozwiązuję za pomocą tego bałaganu:
<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
Oprócz problemów związanych z wyrównaniem obie opcje wydają się „niewyraźne” i byłbym bardzo zobowiązany, gdybyś widział to wcześniej i wiedział o eleganckim rozwiązaniu.
.divider
).Odpowiedzi:
Nie wiem, czy to wymyślono, ale Flexbox oferuje całkiem rozwiązanie:
Zobacz http://jsfiddle.net/MatTheCat/Laut6zyc/ celu uzyskania wersji demonstracyjnej.
Dzisiaj kompatybilność nie jest taka zła (można dodać wszystkie stare składnie Flexboksa) i z wdziękiem się pogarsza.
źródło
Co powiesz na:
Sprawdź to JSFiddle .
Możesz użyć
vw
lub,%
aby reagować .źródło
font-size
.Sposób rozwiązania tego problemu bez znajomości szerokości i koloru tła jest następujący:
Struktura
CSS
Przykład: http://jsfiddle.net/z8Hnz/
Podwójna linia
Aby utworzyć podwójną linię, użyj jednej z następujących opcji:
1) Naprawiono odstęp między liniami
Przykład: http://jsfiddle.net/z8Hnz/103/
2) Niestandardowa przestrzeń między wierszami
Przykład: http://jsfiddle.net/z8Hnz/105/
Wersja SASS (SCSS)
W oparciu o to rozwiązanie dodałem SCSS „z właściwością koloru”, jeśli może to pomóc komuś ...
przykład zastosowania:
źródło
Możesz to zrobić za pomocą :: before i :: after, nie znając szerokości kontenera lub koloru tła, i aby uzyskać lepszą stylizację podziałów linii. Na przykład można to zmodyfikować, aby uzyskać podwójne linie, linie kropkowane itp.
JSFiddle
Wykorzystanie CSS i HTML:
Wersja SCSS:
źródło
Spróbuj tego:
Podgląd na żywo na jsFiddle .
źródło
.divider hr
szerokość zależy od długości tekstu. Sugestia:.divider
i.divider hr
szerokości należy podać wem
jednostkach. Aby uzyskaćhr
szerokość, użyj (.divider
szerokość minus # znaków) / 2.Właśnie natrafiłem na ten sam problem, oto jeden ze sposobów jego rozwiązania:
Działa bez ustawiania tła na elemencie tekstowym, tzn. Będzie dobrze wyglądać bez względu na to, jakie tło jest za nim.
Możesz to wypróbować tutaj: http://jsfiddle.net/88vgS/
źródło
AKTUALIZACJA: To nie będzie działać przy użyciu HTML5
Zamiast tego sprawdź to pytanie, aby uzyskać więcej technik: wyzwanie CSS, czy mogę to zrobić bez wprowadzania więcej kodu HTML?
Kiedyś
line-height:0
tworzyłem efekt w nagłówku mojej strony guerilla-alumnus.comInną dobrą metodą jest http://robots.thoughtbot.com/
Używa obrazu tła i unosi się, aby uzyskać fajny efekt
źródło
źródło
Jeśli możesz używać CSS i chcesz użyć przestarzałego
align
atrybutu, będzie działał stylizowany zestaw pól / legenda:Zamierzonym celem zestawu pól jest logiczne grupowanie pól formularza. Jak zauważył willoler,
text-align: center
styl dla nie będzie działał dlalegend
elementów.align="center"
jest przestarzałym kodem HTML, ale powinien poprawnie wyśrodkować tekst we wszystkich przeglądarkach.źródło
<legend>
nabiera cech eksponowanieblock
lubinline-block
elementu, ponieważ może on być wyściełane i depozytu zabezpieczającego, co oznaczatext-align:center
nie powinno praca ...legend
elementu,align="center"
jest to jedyne rozwiązanie, które mogę znaleźć, które niezawodnie wyśrodkowujelegend
.Siatka bootstrap:
HTML:
CSS:
źródło
vertical-center
Klasa już nie istnieje w bootstrap (4.3.1). Czy możesz zaktualizować swoją odpowiedź, aby powiedziećalign-items-center
?Możesz po prostu użyć względnego położenia i ustawić wysokość nadrzędnego
źródło
Oto proste rozwiązanie tylko z css, bez sztuczek w tle ...
HTML:
przykładowe skrzypce: https://jsfiddle.net/0Lkj6wd3/
źródło
Zły hack ...
źródło
Wysadzam 2-letni post, ale oto jak podchodzę do tych sytuacji, używając tylko jednego elementu i CSS.
Oto skrzypce, aby to sprawdzić: http://jsfiddle.net/sRhBc/ (losowe zdjęcie z Google zrobione dla granicy).
Jedyną wadą tego podejścia jest to, że nie obsługuje IE7.
źródło
Po prostu użyj
źródło
Woohoo mój pierwszy post, mimo że ma już rok. Aby uniknąć problemów z kolorem tła w opakowaniach, możesz użyć bloku wstawiania z hr (nikt tego wyraźnie nie powiedział). Wyrównanie tekstu powinno być wyśrodkowane poprawnie, ponieważ są elementami wbudowanymi.
źródło
Używam
h1
z rozpiętością na środku.Przykład HTML:
Przykład CSS:
Proste.
źródło
span
, możesz rozważyć użyciediv
. Służy temu samemu celowi, z tym wyjątkiem, że jest to oczywiście element blokowy. :)h1
jest elementem wbudowanym.span
jest miłe dla owijania rzeczy, ale powodem Wolędiv
w tym przypadku, to dlatego, Youri użycie CSS ustawićspan
siędisplay:block;
. Nie widzę sensu przekształcania elementu wbudowanego w element blokowy, gdy dostępne są odpowiednie elementy blokowe (div
).h1
tak naprawdę jest to element BLOKU. Przepraszam za zamieszanie. Nadal nie widzę sensu przekształcania elementuspan
w blok, ale wystarczająco sprawiedliwie.Patrząc wyżej, zmodyfikowałem:
CSS
HTML
Wydaje się, że działa dobrze.
źródło
Biorąc rozwiązanie @ kajic i umieszczając stylizację w CSS:
Następnie CSS (ale to zależy od CSS3 przy użyciu n-tego selektora):
Twoje zdrowie.
(PS Na tbody i tr, Chrome, IE i Firefox przynajmniej automatycznie wstawiają tbody i tr, i dlatego moja próbka, jak @ kajic's, nie zawierała ich, aby skrócić czas wymaganego znacznika HTML. To rozwiązanie był testowany z najnowszymi wersjami IE, Chrome i Firefox, od 2013).
źródło
STRONA DEMO
HTML
CSS
źródło
To działało dla mnie i nie wymaga koloru tła za tekstem, aby ukryć linię graniczną, zamiast tego używa rzeczywistego znacznika hr. Możesz bawić się z szerokościami, aby uzyskać różne rozmiary linii hr.
źródło
Zrobiłem skrzypce które używają FlexBox, a także dam ci różne style HR (podwójna linia, symbole na środku linii, cień, wstawka, przerywnik itp.).
CSS
HTML
Lub tutaj jest interaktywny Fiddle: http://jsfiddle.net/mpyszenj/439/
źródło
Możesz spróbować zrobić
fieldset
i wyrównać element „legenda” (tekst „następnej sekcji”) do środka pola, używając tylkoborder-top
zestawu. Nie jestem pewien, jak legenda jest pozycjonowana zgodnie z elementem zestawu pól. Wyobrażam sobie, że to może być prostemargin: 0px auto
wykonanie tej sztuczki .przykład:
źródło
Możesz to osiągnąć bez
<hr />
. Semantycznie projektowanie powinno odbywać się za pomocą CSS, w tym przypadku jest to całkiem możliwe.źródło
Zawsze jest dobry stary FIELDSET
źródło
HTML
css
źródło
CSS
HTML
Możesz zmodyfikować szerokość w klasie „side” i „middle” w zależności od długości tekstu w znaczniku „span”. Upewnij się, że szerokość „środka” plus 2-krotność szerokości „boku” równa 100%.
źródło
Czułe, przezroczyste tło, zmienna wysokość i styl dzielnika, zmienne położenie tekstu, regulowana odległość między dzielnikiem a tekstem. Może być również stosowany wielokrotnie z różnymi selektorami dla wielu stylów dzielników w tym samym projekcie.
SCSS poniżej.
Znaczniki (HTML):
CSS :
Bez
text-position
tego domyślnie wyśrodkuje.Próbny:
Pokaż fragment kodu
I SCSS , aby szybko go zmodyfikować:
bawić się tutaj .
źródło
źródło
źródło