css-position


Div position (margin:auto)


so I'm customizing my tumblr and my pagination is out of place. I put the pagination divs inside the content div so that it should vertically align on the bottom center of the page. but the pagination divs (the older and newer buttons) keep appearing on the bottom left corner instead of bottom center. i tried centering the pagination div with margin:auto and it seems to be stuck on the bottom left for some reason.
html:
<div id="content">
<div id="page">
<div class="pagination">
{block:NextPage} ←OLDER {/block:NextPage}</div>
<div class="pagination">
{block:PreviousPage} NEWER→ {/block:PreviousPage}</div>
</div>
css:
#content .pagination{margin:0 auto;
background-color:blue;
color:white;
border-radius:15px;
font-size:20px;
font-family:broadway;
}
#content .pagination a{margin:0 auto;
color:white;
opacity:.5;
}
#content .pagination a:hover {
color:white;
opacity:1.0;
filter:alpha(opacity=100);
}
#content #page .pagination {
display:inline-block;
}
You need to set
#page {
text-align: center;
}
If you are able to change the html markup, you could do your pagination like this:
<div class="pagination-wrapper">
<div class="pagination">
{block:NextPage} ←OLDER {/block:NextPage}
</div>
<div class="pagination">
{block:PreviousPage} NEWER→ {/block:PreviousPage}
</div>
</div>
and
.pagination-wrapper {
text-align: center;
}

Related Links

Sticky Footer at bottom of PAGE, not just bottom of WINDOW
How to set div absolute position from the parent div
Polymer paper-fab with position:fixed behaves strangely when used with core-list that has a scrollTarget
What is the use of “static” positioning in CSS?
CSS: fixed position
Style sheet positioning won't keep everything in place
Div on top 100%
CSS float image align
google sites html box tool css postion absolute
Manual Positioning of Shareaholic ShareBar Plugin
Div position (margin:auto)
Removing or Hiding Blank Space Left by Relative Positioning
Lightweight Javascript Responsive Positioning Library
Bootstrap 3.0 : Fixed column
space under footer on large screen resolution
Lightbox 2.6 positioning

Categories

HOME
beautifulsoup
httparty
ng-idle
error-handling
access
3d-reconstruction
babeljs
maxscript
commonjs
google-chrome-app
endpoint
internationalization
alpacajs
vuejs
pyramid
mapstruct
rubymotion
exit
tiki-wiki
fragment-backstack
cppreference
gp
mql
google-cast
send
mockjax
jett
roblox
servicestack-text
graphhopper
timing
comparison-operators
plaintext
branching-and-merging
postgresql-8.4
plr
logback-groovy
memory-mapping
uiimage
facebook-social-plugins
double-click
nanoc
openal
sonarlint-eclipse
dbcontext
dtsearch
excel-dna
mouseleave
pocketsphinx-android
stripe-connect
gogs
avspeechsynthesizer
angular-ui-typeahead
data-protection
atan2
avisynth
fiware-monitoring
file-move
rate-limiting
toolkit
xmltype
bcache
adehabitathr
cryptographichashfunction
gii
xml-dsig
c++builder-xe5
windows-phone-8-sdk
workitem
route-provider
mantle
redis-py
onmousemove
cakephp-1.2
faye
rmiregistry
paginator
floating-point-exceptions
django-paypal
codebase
ruby-1.8
easyb
feasibility

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App