post - 如何将照片集帖子放在我的 Tumblr 主题上？

Question

我似乎找不到将照片集帖子集中在我的 tumblr 主题上的方法。所有其他帖子类型似乎都是居中的，即使是普通的照片帖子。但由于某种原因，照片集的帖子向右偏了一点。

这是我的主题的标记：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{Title}{block:PostTitle}: {PostTitle}{/block:PostTitle}</title>
    {block:Description}
    <meta name="description" content="{MetaDescription}">
    {/block:Description}
    <meta name="viewport" content="width=device-width">

    <!-- Tumblr Theme configuration -->
    <meta name="color:Background" content="#FFFFFF"/>
    <meta name="color:Link" content="#0000FF"/>
    <meta name="color:Link Hover" content="#FF0000"/>
    <meta name="color:Link Visited" content="#800080"/>

    <meta name="font:Site Font" content=""/>

    <meta name="text:Footer Text" content=""/>
    <meta name="text:Google Analytics ID" content=""/>

    <meta name="image:Header" content=""/>

    <meta name="if:Show Archive" content="1"/>
    <meta name="if:Show RSS" content="0"/>
    <meta name="if:Show Search" content="0"/>

    <meta name="if:Use Time Ago" content="1"/>
    <meta name="if:Use HighRes Photos" content="1"/>
    <meta name="if:Use Number Pagination" content="1"/>

    <!-- END Tumblr Theme configuration -->

    <link rel="shortcut icon" href="{Favicon}">
    <link rel="apple-touch-icon" href="{PortraitURL-128}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">

    <link rel="stylesheet" href="https://raw.github.com/wxrod/Tumblr-HTML5-Blank-Theme/master/css/normalize.min.css">

    <script src="https://raw.github.com/wxrod/Tumblr-HTML5-Blank-Theme/master/js/vendor/modernizr.min.js"></script>

    <style type="text/css">

/* THE BASICS */

body {
    background-color: #222;
    background-image: url('http://static.tumblr.com/ff3ukto/rAYmq57vt/hd_2ac77715bdfbaf4f407dbec9d5d75605.jpg');
    font-family: arial;
    font-size: 11px;
}

a { 
    font-family: arial;
    font-size: 8pt;
    text-decoration: none;
    color: #8b1f2e;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

a:hover{ 
    color: #b61a30; 
}

i {
    color: #fff;
}

h1 {
    font-family: arial;
    font-size: 20px;
    font-weight: 600;
    background-color: #e0d4a8;
    border-bottom: solid 5px #d7ca98;
    padding-left: 12px;
}


/*POSTS*/

#content {
    color: #c4c4c4;
    background-color: #131313;
    margin-left: 5%;
    width: 47%;
    text-align: center;
    position: absolute;
    top: 25%;
}

.post {
    border-bottom: solid 1px #212121;
    padding-bottom: 10px;
    padding: 40px;
    width: auto;
}


/*SIDEBAR*/

.sidebar {
    background-color: #ede6cc;
    text-align: justify;
    position: fixed;
    top: 25%;
    left: 55%;
    width: 38%;
    opacity: 0.9;
    padding: 10px;
}

.sidebar:hover {
    opacity: 1.0;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.pagination {
    font-color: #222;
}

/*NAV*/

#nav {
    position: absolute;
    top: 21%;
    width: 89%;
    background-color: #4addae;
    margin-left: 5%;
    opacity: 0.9;
    text-align: center;
    padding-bottom: 8px;
}

#nav a {
    text-decoration: none;
    font-family: arial;
    color: #222;
    font-size: 12pt;
    font-style: italic;
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
    padding-bottom: 7px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#nav a:hover {
    color: #000000;
    background-color: #e8d79a;
    border-bottom: 3px #222 solid;
    padding-bottom: 7px;
}

/*TAGS*/

ul {
    list-style: lower-roman;
    display: block;
    text-align: center;
    width: 500px;
}

ul li {
    list-style: lower-roman;
    display: block;
    text-align: center;
     width: 500px;
}

ul.tags {
    list-style: lower-roman;
display: inline;
margin: 0;
padding: 0;
text-align: center;
}

ul.tags li {
display: inline;
list-style: lower-roman;
margin: 0;
padding: 0;
}

ul.tags li:after {
content: ", ";
color: #aaa;
list-style-type: lower-roman;
}

ul.tags li:last-child:after {
content: "";
list-style-type: lower-roman;
}

img.icon {
    vertical-align:text-top;
    float: right;
    padding: 2px;
}

/*IMAGE SIZE*/

.photoset {
    -webkit-transition: all .40s linear;
    -moz-transition: all .40s linear;
    -o-transition: all .40s linear;
    transition: all .40s linear;
    opacity: 0.8;
    padding: none;
}

#content blockquote {
      margin: 0;
      padding: none;
      width: 100%;
}

.photoset:hover {
 -webkit-transition: all .40s linear;
    -moz-transition: all .40s linear;
    -o-transition: all .40s linear;
    transition: all .40s linear;
    opacity: 1.0;
}

.photo img {
    border: 7px #272727 solid;
    width: 500px;
    max-width: 100%;
    -webkit-transition: all .40s linear;
    -moz-transition: all .40s linear;
    -o-transition: all .40s linear;
    transition: all .40s linear;
    opacity: 0.8;
}

.photo img:hover {
   border: 7px #121212 solid;
    -webkit-transition: all .40s linear;
    -moz-transition: all .40s linear;
    -o-transition: all .40s linear;
    transition: all .40s linear;
    opacity: 1.0;
}

/*DATE*/

#date {
    width: inherit;
    padding: 5px;
    text-transform: uppercase;
    font-family: arial;
    font-weight: bold;
    font-size: 12px;
    text-align: right;
    background-color: #242424;
    border-top: 1px solid #000;
    border-bottom: 1px solid #313131;
}

#date a {
    color: #f2e8c4;
}

.jump_page {
padding: 4px 8px;
border: 2px solid #cce45e;
background-color: #ffffff;
color:#585858;
font-family:century gothic;
font-size:11px;
text-decoration:none;
}

.current_page, .jump_page:hover {
padding: 4px 8px;
border: 2px solid #b2c750;
background-color: #cce45e;
color: #ffffff;
font-family:century gothic;
font-size:11px;
text-decoration:none;
}

/* BLOCKQUOTE */

blockquote {
    font-family: arial;
    font-size: 15px;
    padding: 1px;
    font-style: italic;
    background-color: #1b1b1b;
    color: #353535;
    border-left: 2px #292929 solid;
    border-right: 2px #292929 solid;
}

footer {
    background-color: #131313;
    padding: 4px;
    border-top: 12px solid #711019;
}
      {CustomCSS}
    </style>
  </head>
  <body>
    <!--[if lt IE 7]>
    <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->
    <div id="wrapper">
      <!--PAGE HEADER ******************************************************************* -->
      <header>
      <img src="http://static.tumblr.com/ff3ukto/JKomqv42k/waovntgbanner.jpg" style="position: absolute; margin-left: 5%; top: 0%;">
        {block:IfHeaderImage}
          <div id="logo"><a href="/"><img src="{image:Header}"/></a></div>
        {/block:IfHeaderImage}
    <div class="sidebar">
        {block:Description}
          <p id="description">{Description}</p>
        {/block:Description}
        <div class="pagination">
{block:PreviousPage}<a href="{PreviousPage}">« </a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}"> »</a>{/block:NextPage}
</div>
        </div>
        <div id="nav">
            <a href="https://www.etsy.com/shop/weareonly">etsy shop</a>
            <a href="http://weareonly.tictail.com/">tictail shop</a>
            <a href="http://instagram.com/weareonly">instagram</a>
            <a href="http://www.weareonlyvntg.tumblr.com/contact">contact</a>
            <a href="http://www.weareonlyvntg.tumblr.com/tags">tags</a>
        </div>      
      </header>
      <!--PAGE LOOP ******************************************************************* -->
    <center><div id="content">
      <div id="main" role="main">
        {block:Posts}
        <div id="date">
            {block:Date}
                <a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero}, {Year}</a>
            {/block:Date}
            {block:NoteCount}
                - <a href="{Permalink}">{NoteCount}</a>
            {/block:NoteCount}
        </div>
        <title>{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}</title>
{block:HasTags}{/block:HasTags}
        {block:Text}
          <article class="post text">
            {block:Title}
            <header>
              <h2 class="entry-title">{Title}</h2>
            </header>
            {/block:Title}
            <p>
              {Body}
            </p>
        {/block:Text}

        {block:Photo}
          <article class="post photo">
            <figure>
                {LinkOpenTag}
                {block:IfUseHighResPhotos}
                  <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
                {/block:IfUseHighResPhotos}
                {block:IfNotUseHighResPhotos}
                  <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
                {/block:IfNotUseHighResPhotos}

              {block:IfNotUseHighResPhotos}
                {block:HighRes}
                <a class="high-res" href="{PhotoURL-HighRes}">High-Res</a>
                {/block:HighRes}
              {/block:IfNotUseHighResPhotos}

              {block:Caption}
                <figcaption>
                  <center>{Caption}</center>
                </figcaption>
              {/block:Caption}
              {LinkCloseTag}
            </figure>
        {/block:Photo}

        {block:Photoset}
          <article class="post photoset">
            <figure>
              <center>{Photoset-500}
              {block:Caption}
                <figcaption>
                  {Caption}
                </figcaption>
              {/block:Caption}
            </center></figure>
        {/block:Photoset}

        {block:Quote}
          <article class="post quote">
            <blockquote>{Quote}</blockquote>
            {block:Source}
              <footer>{Source}</footer>
            {/block:Source}
        {/block:Quote}

        {block:Link}
          <article class="post link">
            <header>
              <h2>
                <a href="{URL}" {Target}>{Name}</a>
              </h2>
            </header> 
            {block:Description}
            <p> {Description} </p>
            {/block:Description}
        {/block:Link}

        {block:Chat}
          <article class="post chat">
            {block:Title}
            <header>
              <h2>{Title}</h2>
            </header>
            {/block:Title}
            <dialog>
              {block:Lines}
                {block:Label}
                  <dt class="{Alt} {UserNumber}">
                    {Label}
                  </dt>
                {/block:Label}
                <dd> {Line} </dd>
              {/block:Lines}
            </dialog>
        {/block:Chat}

        {block:Audio}
          <article class="post audio">
            <header>
              <h2>
                {block:Artist}
                  {Artist}
                {/block:Artist}

                {block:TrackName}
                  {TrackName}
                {/block:TrackName}
              </h2>
            </header>
            <figure>
              {block:AlbumArt}
                <img src="{AlbumArtURL}"/>
              {/block:AlbumArt}

              {block:AudioPlayer}
                {AudioPlayer}
              {/block:AudioPlayer} 

              {block:Caption}
                <figcaption>
                  {Caption}
                </figcaption>
              {/block:Caption}
            </figure>
        {/block:Audio}

        {block:Video}
          <article class="post video">
            <figure>
              {Video-500}
              {block:Caption}
                <figcaption>
                  {Caption}
                </figcaption>
              {/block:Caption}
            </figure>
        {/block:Video}

        {block:Answer}
          <article class="post answer">
            <dialog>
              <dt><img src="{AskerPortraitURL-16}"> {lang:Asker asked 2}: </dt>
              <dd>{Question}</dd>

              <dd>{Answer}</dd>
            </dialog>
        {/block:Answer}

            <footer>
            {block:RebloggedFrom}
                source / <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
            {/block:RebloggedFrom}

              {block:NoteCount}
                <div class="notes">notes / <a href="{Permalink}">{NoteCount}</a></div>
              {/block:NoteCount}

              {block:HasTags} 
                <ul>
                  {block:Tags}
                  <li><a href="{TagURL}">#{Tag}</a></li>
                  {/block:Tags}
                </ul>
              {/block:HasTags}

              {block:PermalinkPage}
                {block:PostNotes}<div>{PostNotes-16}</div>{/block:PostNotes}
              {/block:PermalinkPage}   
            </footer>
          </article>
        {/block:Posts}
      </div>
    </div></center>
      <!--PAGE FOOTER ******************************************************************* -->
    </div>
    {block:IfGoogleAnalyticsID}    
    <script>
      var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']];
      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
    {/block:IfGoogleAnalyticsID}    
  </body>
</html>

score 0 · Accepted Answer

我知道这是一篇旧帖子，但供将来参考：如果您想对齐照片集（单个帖子与多张图片）帖子，并且您正在使用自定义主题：

进入您的自定义 tumblr 页面
点击“编辑 HTML”
Ctrl + F 搜索 {block:Photoset} 代码可能看起来有点像这样，它不必很精确。

{block:Photoset}
<div class="photoset">
    {block:IndexPage}{Photoset-250}{/block:IndexPage}
    {block:PermalinkPage}{Photoset-700}{/block:PermalinkPage}
    {block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

现在您将添加到代码中。（没有小星星的东西）

{block:Photoset}
<div class="photoset">
**<div align="center">**
    {block:IndexPage}{Photoset-250}{/block:IndexPage}
    {block:PermalinkPage}{Photoset-700}{/block:PermalinkPage}
    {block:Caption}{Caption}{/block:Caption}
    **</div>**
{/block:Photoset}

然后更新预览并保存。

post - 如何将照片集帖子放在我的 Tumblr 主题上？

1 回答 1

Related

Reference