Hallöchen zusammen in den früher Morgenstunden...
Also ich habe folgendes Problem, ich habe mir eine Pagination gebastelt und versuche nun verzweifelt den Inhalt eines DIV's zu zentrieren. Ich weiß, dass an sich net geht, da es kein Block-Element glaube ich ist. Ich leider eine absolute Null was CSS angeht
Aussehen tut das ganze folgendermaßen:

Ich möchte gerne den Inhalt im Div mit dem Border zentrieren.
meine Pagination sieht folgendermaßen aus:
.paginationOuter -> Ist so definiert, das er die maximal Länge des divs hat, also mit 13Buttons. Da dies aber wohl nicht so oft vorkommen wird, möchte ich den Inhalt Standardmäßig zentrieren.
und die Dazu passende CSS:
Meine Frage ist nun, ist das möglich?
Also ich habe folgendes Problem, ich habe mir eine Pagination gebastelt und versuche nun verzweifelt den Inhalt eines DIV's zu zentrieren. Ich weiß, dass an sich net geht, da es kein Block-Element glaube ich ist. Ich leider eine absolute Null was CSS angeht
Aussehen tut das ganze folgendermaßen:

Ich möchte gerne den Inhalt im Div mit dem Border zentrieren.
meine Pagination sieht folgendermaßen aus:
Code:
<div class="paginationOuter"> <div class="paginationButton paginationJumper"><a href="/index/index?page=0">«</a></div> <div class="paginationButton paginationJumper"><a href="/index/index?page=4">‹</a></div> <div class="paginationButton disabledPage">...</div> <div class="paginationButton"><a href="/index/index?page=2">3</a></div> <div class="paginationButton"><a href="/index/index?page=3">4</a></div> <div class="paginationButton"><a href="/index/index?page=4">5</a></div> <div class="paginationButton activePage"><a href="#">6</a></div> <div class="paginationButton paginationJumper disabledPage">›</div> <div class="paginationButton paginationJumper disabledPage">»</div> </div>
und die Dazu passende CSS:
Code:
<style type="text/css"> .paginationOuter { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; line-height:15px; width:403px; /* paginationButton-width(21px) + 2*( paginationButton-border(1px) + paginationButton-padding(3px) + paginationButton-margin(1px) )= 31px (maximal 13Buttons) */ height: 21px; border:1px solid black; /* only for debug */ } .paginationButton { float:left; margin: 0 1px; border: 1px solid #ccc; width:21px; max-width:27px; min-width:27px; heigth: 14px; text-align:center; overflow: hidden; color:#84827B; } .activePage { background-color: #F9D1D1; font-weight:bold; } .paginationButton a:hover { background-color: #F9D1D1; text-decoration:none; font-weight:bold; color:#84827B; } .paginationButton a { padding: 2px 3px; width:21px; heigth: 14px; display: block; } .paginationButton a:link { text-decoration:none; color:#84827B; } .paginationButton a:visited { text-decoration:none; color:#84827B; } .paginationButton a:active { text-decoration:none; color:#84827B; } .paginationJumper { font-weight:bold; font-size:11px; } .disabledPage { background-color: #EDEDED; color: #9E9E9E; padding:2px 0; } </style>
Kommentar