Wycentrowanie <div> i dopasowanie do zawartości

0

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

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>
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!

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0