Wyśrodkowanie div'a (CSS i HTML5)
Jak wyśrodkować div'a w poziomie
W bardzo prosty sposób możemy to zrobić umieszczając w pliku .css następujący kod:
width: 900px;
position: absolute;
margin-left: -450px;
left: 50%;
Spowoduje on wyśrodkowanie elementu zawartego w klamrze div'a, gdzie "width" oznacza szerokość div'a, margin-left jest połową szerokości "width" ale o wartości ujemnej.
Przykładowy kod strony z wyśrodkowanym w poziomie div'em:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Wyśrodkowanie div'a</title>
<meta name="Author" content="Adam Sondel">
<meta charset="UTF-8">
<style type="text/css">
.element {
width: 900px;
height: 600px;
position: absolute;
margin-left: -450px;
left: 50%;
background:#80ff80}
</style>
</head>
<body>
<div class="element">
Lorem ipsum dolor sit amet, usu te nobis expetenda,
salutandi posidonium mei eu. Essent percipit liberavisse his id.
Ex mei graeco euripidis. Et est affert assueverit, eos an tation graece invidunt.
Modo inciderint sea at, id per atqui tamquam, vis aeterno contentiones id.
Ludus saepe soleat usu et. Te unum facilisi pro, ut ludus antiopam iracundia duo.
Est ei verear percipit, usu elitr putant in.
Mei cu falli nihil maluisset, sit percipitur deterruisset ei.
Purto cotidieque ei mei, cetero tibique et qui, ea autem impetus scripta mea.
Alterum volutpat est ad, commodo aperiri per ne. Ius no omnium persecuti, mei paulo utamur an.
Rebum audire te mel, mucius perpetua intellegam at vix. Ut assum nusquam eos, veniam saperet appetere ad has.
Dicunt singulis evertitur eam id. Vix cu quod honestatis neglegentur, wisi dolore has te,
nec ne odio autem imperdiet. Pertinax nominati principes no nam, sed ea soleat doming periculis,
ut duo quod putant minimum. Duo electram hendrerit ne. Nam ei dicta inimicus,
duo in fabulas ullamcorper reprehendunt, sed posse regione ad. Legendos euripidis ea eos,
est purto copiosae mediocrem ei.</div>
</body>
</html>
A w przeglądarce wygląda to następująco:
Zobacz (niestety pojawiają sie reklamy)
Chcesz być specem od IT? Przejrzyj książki informatyczne z interesującej Cię dziedziny!O mnie
Komentarze
Prześlij komentarz