Centrer mes images sous tumblr

Fermé
Tiphaine_C - 10 janv. 2012 à 22:11
Bonjour,

Je suis en train de réaliser mon site sous tumblr, je suis débutante, et je me suis dit que changer un thème serait plus simple que d'en créer un.

Je me heurte à un problème depuis quelques jours.

J'aimerais centrer automatiquement mes images quand je les poste dans les articles et les pages.

Voici le code actuel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
Theme: The Minimalist v1.
Design: The Minimalist (http://minimalist.co)
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>
<meta name="description" content="{MetaDescription}" />
<meta name="if:Show description" content="1" />
<meta name="if:Show search" content="1" />
<meta name="text:Twitter name" content="" />
<meta name="text:Disqus Shortname" content="" />
<meta name="text:Google Analytics ID" content="" />
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />

<!-- Styles -->

<link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
<style type="text/css">

/*----- GENERAL -----*/

header, footer, section, article, nav, aside {
display: block;
}

body {
background: #ffffff;
color: #222;
font: 12px/20px Georgia, "Times New Roman", Times, serif;
padding-top: 25px;
text-align: center;
width:800px;
margin: 0 auto;
}

h1, h2, h3, hQ {
font-family: Cufon;
}

h1 {
font-size: 40px;
line-height: 50px;
color: #bca474;
}

h2 {
font-size: 40px;
line-height: 37px;
}

h3 {
font-size: 24px;
line-height: 27px;
}

a:link, a:visited {
color: #222222;
font-weight: bold;
text-decoration: none;
}

a:hover, a:active {
text-decoration: underline;
}

hr{
border:0 #ccc solid;
border-top-width:1px;
clear:both;
height:0;
}

ol{list-style:decimal}

ul{list-style:disc}

li{margin-left:30px}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}

#main {
padding: 0px;
}

/*----- MASTHEAD -----*/

.noMeta > div {
padding: 0px;
}

#masthead {
margin-bottom: 0px;
}

#masthead h1 {
margin-bottom: 0;
}

#masthead h1 a:link, #masthead h1 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}

#masthead h1 a:active {
outline: 0;
}

#masthead p {
font-family: Georgia, serif;
font-size: 20px;
color: #fff;
margin-bottom: 0;
}

#masthead a:link, #masthead a:visited {
color: #fff;
}

#siteDescription{
font-size: 20px;
color: #222;
text-transform: Uppercase;
border-top: 1px solid #222;
margin-top: 20px;
margin-bottom: -5px;
padding: 15px 0 0 0;
font-family: Cufon;
}

/*----- SEARCH FORM -----*/

#frmSearch {
padding-top: 20px;
display: none;
}

#txtSearch {
background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
width: 225px;
padding: 2px 0 0 20px;
font: 12px/12px Georgia, "Times New Roman", Times, serif;
color: #222;
border: 0px;
}

/*----- MAIN HEADER NAV STRIP -----*/

#mainNav {
border-top: 1px solid #222;
border-bottom: 2px solid #222;
margin-top: 20px;
padding: 15px;
font-family: Cufon;
}

#mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}

#mainNav li {
margin: 5px;
display: inline;
padding: 0;
}

#mainNav a:link, #mainNav a:visited {
padding: 0;
font-size: 14px;
line-height: 14px;
margin: 0 2px;
text-decoration: none;
color: #222;
text-transform: Uppercase;
}

#mainNav a:hover, #mainNav a:active {
outline: none;
text-decoration: none;
border-bottom: 1px solid #222;
}

#mainNav a.active {
text-decoration: none;
border-bottom: 1px solid #222;
}

/*----- ARTICLE META INFO -----*/

#designline {
margin-top: 50px;
}

h5{
position: relative;
top: -35px;
margin-bottom: 0px;
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
border-bottom: 1px solid #bca474;
background: #fff;
}

h5 a:link, .line a:visited{
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
}

h5 a:hover{
text-decoration: underline;
}

h5 abbr{
display: inline-block;
position: relative;
margin: 0 auto;
padding: 0 8px;
background: #fff;
top: 10px;

}

/*----- ARTICLE -----*/

article {
background: #fff;
margin-bottom: 20px;
text-align: left;
position: relative;
}

article img {
border: none;
margin-bottom: 35px;
max-width: 800px;
}

article p img {
margin: 0px;
}
article > div {
padding: 0px;
overflow: hidden;
}
article .searchPage {
margin: 35px 0 0 0;
}

.searchPageText {
margin: 0 0 30px 0;
}

article .meta a:link, article .meta a:visited {
text-decoration: none;
}

article .meta a:hover, article .meta a:active {
text-decoration: underline;
}

article h2 {
text-align: center;
color: #222222;
}

article h2 a:link, article h2 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}

article h2 a:hover, article h2 a:active {
text-decoration: none;
border-bottom: 1px solid #222;
}

blockquote {
border-left: 2px solid #bca474;
margin-left: 0;
padding-left: 1em;
}

#quoteSource{
margin: 0 auto;
text-align: left;
}

#quoteText h2 {
text-align: left;
color: #222222;
}

article .chat {
list-style: none;
padding: 0;
margin: 0;
}

article .chat li {
margin: 0 0 2px;
padding: 2px 0 2px 0;
}

.photoCaption {
text-align: center;
}

/*----- AUDIO PLAYER -----*/

.audio {
height: 28px;
width: 26px;
overflow: hidden;
margin: auto;
padding-top: 7px;
}

.audioc {
background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
background-repeat: no-repeat;
height: 41px;
width: 41px;
}

.audioCaption {
margin-top: 1px;
}

.audioleft {
width: 41px;
float: left;
}

.audioright {
width: 444px;
float: right;
}

.audioContainer {
margin-top: 5px;
}

.audioClear {
clear:both;
}

/*----- ARTICLE NOTES -----*/

.notes {
border-top: 1px solid #bca474;
list-style: none;
padding: 20px 0 5px 0;
margin: 30px 0 0 0;
}
.notes li {
margin: 0;
}

.notes .avatar {
margin: 0 5px 0 0;
position: relative;
top: 5px;
}

.notes blockquote {
margin: 10px 0 0 35px;
padding-left: 10px;
border-left: 2px solid #222222;
}

.media {
width: 500px;
margin-bottom: 20px;
}

/*----- PAGE NAVIGATION -----*/

#pageNav {
margin-top: 20px;
border-top: 1px solid #222;
}

#pageNav ul {
list-style: none;
padding: 10px 15px;
margin: 10px 0;
}

#pageNav li {
margin: 0;
display: inline;
}

#pageNav a:link, #pageNav a:visited {
font: 11px Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0 2px;
background: #34hdf5;
color: #222;
text-decoration: none;
}

#pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
text-decoration: underline;
}

#pageNavOlder:after {
content: " »";
font-size: 10px;
}

#pageNavNewer:before {
content: "« ";
}

/*----- FOOTER META -----*/

#sitemeta {
border-top: 2px solid #222;
color: #222;
padding: 20px 0 32px 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
}

#sitemeta p {
margin: 0;
}

#sitemeta a:link, #sitemeta a:visited {
color: #222;
font-weight: bold;
}

{CustomCSS}
</style>

<!-- Scripts -->

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/q9z1v7k/dgEkijh8r/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/f1whv92/fgIl65bo1/cufon_300.font.js" type="text/javascript"></script>

<script type="text/javascript">
Cufon.replace('h1',{ fontFamily: "Cufon" });
Cufon.replace('h2',{ fontFamily: "Cufon" });
Cufon.replace('h3',{ fontFamily: "Cufon" });
Cufon.replace('#mainNav',{ fontFamily: "Cufon" });
Cufon.replace('#siteDescription',{ fontFamily: "Cufon" });
</script>

<script>
$(function() {
var search = $("#txtSearch").val();
var placeholder = "Search...";
var fadeToOpacity = 0.4;
$("#txtSearch").fadeTo("normal", fadeToOpacity);
if (search == "") {
$("#txtSearch").val(placeholder);
}
$("#txtSearch").blur(function() {
search = $("#txtSearch").val();
if (!(search != "" && search != placeholder)) {
$("#txtSearch").val(placeholder);
}
$("#txtSearch").fadeTo("normal", fadeToOpacity);
});
$("#txtSearch").focus(function() {
search = $("#txtSearch").val();
if (search == placeholder) {
$("#txtSearch").val("");
}
$("#txtSearch").fadeTo("normal", 1);
});
$("#btnSearch").click(function() {
$("#frmSearch").slideToggle("normal");
$(this).toggleClass("active");
// $("#txtSearch").focus();
});
});
</script>

</head>
<body>

<header id="masthead" class="clearfix">
<div id="thehead">
<h1 class="cufon"><a href="/">{Title}</a></h1>
<form action="/search" method="get" id="frmSearch">
<input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
</form>

{block:Description}
<div id="siteDescription">{Description}</div>
{block:Description}

<nav id="mainNav">
{block:HasPages}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
{/block:HasPages}
{block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}
{block:IfTwitterName}
<li><a href="http://twitter.com/{text:Twitter name}">Twitter</a></li>
{/block:IfTwitterName}
</nav>
</div>
</header>

<section id="main" class="clearfix">
<div class="layout">
{block:SearchPage}
<article>
<div>
<div class="searchPage">
<h2>Search results for <a href="{URLSafeSearchQuery}">{SearchQuery}</a></h2>
</div>
{block:NoSearchResults}
<div class="searchPageText">
<p>I'm sorry, but we couldn't find anything matching "<b>{SearchQuery}</b>". Suggestions:</p>
<ul>
<li>Make sure all words are spelled correctly.</li>
<li>Try different keywords.</li>
<li>Try more general keywords.</li>
</ul>
</div>
{/block:NoSearchResults}
</div>
</article>
{/block:SearchPage}

{block:TagPage}
<article>
<div>
<div class="searchPage">
<h2>Posts tagged <a href="{TagURL}">{Tag}</a></h2>
</div>
</div>
</article>
{/block:TagPage}

{block:Posts}
<div id="designline">


</h5>
</div>

<article>
<div>
{block:Text}
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
{/block:Text}

{block:Photo}


{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="photoCaption">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="media">{Photoset-500}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}



{/block:Photoset}


{block:Quote}
<div id="quoteText"><h2>{Quote}</h2></div>
{block:Source}<div id="quoteSource"><p>—{Source}</p></div>{/block:Source}
{/block:Quote}

{block:Link}
<h2><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}
<div>{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">
{block:Lines}
<li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Audio}
<div class="audioleft">
<div class="audioc">
<div class="audio">{AudioPlayerBlack}</div>
</div>
</div>
<div class="audioright">
<div class="audioCaption">{block:Artist}<b>{Artist}</b>{/block:Artist}
<p>—{block:TrackName}{TrackName}{/block:TrackName}</p>
</div>
</div>
<div class="audioClear"></div>
<div class="audioContainer">
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Audio}

{block:Video}
<div class="media">{Video-500}</div>
{block:Caption}<div>{Caption}</div>{/block:Caption}
{/block:Video}

{block:Answer}
<h3>{Asker} asked: {Question}</h3>
{Answer}
{/block:Answer}

{block:Date}

{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

{block:Date}

</div>
</article>
{/block:Posts}

{block:PermalinkPagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousPost}<li><a href="{PreviousPost}" id="pageNavNewer">Previous</a></li>{/block:PreviousPost}
{block:NextPost}<li><a href="{NextPost}" id="pageNavOlder">Next</a></li>{/block:NextPost}
</ul>
</nav>
{/block:PermalinkPagination}

{block:Pagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousPage}<li><a href="{PreviousPage}" id="pageNavNewer">Newer</a></li>{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}<li><a href="{URL}" class="active">{PageNumber}</a></li>{/block:CurrentPage}
{block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}<li><a href="{NextPage}" id="pageNavOlder">Older</a></li>{/block:NextPage}
</ul>
</nav>
{/block:Pagination}

{block:DayPagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousDayPage}<li><a href="{PreviousDayPage}">« {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} »</a></li>{block:NextDayPage}
</ul>
</nav>
{/block:DayPagination}

</div><!-- END layout -->
</section>

<footer id="sitemeta">
<div class="clearfix">

</div>
</footer>

{block:IfGoogleAnalyticsID}
<script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
{block:IfGoogleAnalyticsID}

</body>
</html>

Merci d'avance de votre aide