Czy jest jakiś sposób w CSS lub JS aby DIV był jednocześnie wycentrowany względem kontenera i dopasowany do własnej zawartości? Próbowałem zrobić to w CSS i zabrakło mi sił.
Z góry dziękuję.
0
0
Dopasowany do zawartości wszerz czy wzwyż? Znaczy w którą stronę ma się rozciągać?
Bo jak w pionie to szerokość określona + margin: auto zapewnią wyśrodkowanie.
0
Wyśrodkowanie w poziomie.
Wiem że margin=auto wyśrodkuje ale tylko wtedy gdy
ma stałą szerokość a tym samym nie dopasowuje się do własnej zawartości. Z kolei gdy ustawię w
wartość width=auto to dzięki margin=auto
zapełni mi kontener jakby miał ustawione width=100%.
W tym tkwi główny problem.</p>
W tym tkwi główny problem.</p>
0
Dokładnie ten sam problem. Siedzę nad tym już drugi dzień i mam serdecznie dość tych divów. Nigdzie nie można znaleźć konkretnej odpowiedzi na ten temat. Po co w ogóle komplikowali te wszystkie języki jak fajnie chodziło wszystko na tabelkach.
1
Cóż, CSS nie ma z tym problemu...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Horizontal centering</title>
<style>
/* Kod wlasciwy */
#container {
text-align: center;
}
#content {
display: inline-block;
text-align: left;
}
/* Tylko dla lepszego wygladu -- nieistotne */
#content {
padding: 10px 30px;
background: #b00;
color: #fff;
font: 1.0em Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Variable width + centered</p>
<p>Another line of text</p>
</div>
</div>
</body>
Gorzej, że stare IE (7 i starsze) już się na tym lubią wyłożyć i element #content dają na całą szerokość. W IE8+ jest git.
CSS w ogóle jest takie sobie jako język layoutowy. Do typografii natomiast nadaje się nieporównywalnie lepiej niż cokolwiek co było kiedyś w samym HTML-u. Obecnie, CSS radzi też sobie lepiej w layoutach. Warto zauważyć, że 1) tabele były zbyt ubogie by złożyć w nich bardziej skomplikowane efekty 2) w CSS można praktycznie przestawić layout na tabelaryczny za pomocą własności display, dając jej wartość table, table-row, table-cell itp. Zachowuje się toto wtedy jak tabela. Ale wymaga to relatywnie nowoczesnej przeglądarki, tj. IE8+ (przypominam, że powszechnie dostępne jest już IE9, oczywiście darmowe, a na horyzoncie jest IE10).
BTW: mamy rok 2011 i nie używamy na chama divów, tylko stosujemy inne elementy jeśli tylko mają sens. Czyli np. article, aside, czy coś. To już zależy od kontekstu i typu zawartości. Zawsze zresztą tak było, zawsze należało wybierać jak najbardziej znaczące elementy, unikając całkowicie pozbawionych znaczenia divów. Tyle że kiedyś blokowych elementów semantycznych było znacznie mniej. Teraz mamy HTML5!