Verticl設定幅と高さを100％に調整

私はtumblrのテーマに取り組んでいます。私はタグ、日付、およびその他の情報をポストのホバーに表示し、ポストを堅実な背景色で塗りつぶしたい。私はこのサイトで答えを探してその部分を達成しました。私が成功していない部分は、ポストセンター/ミドルの内部の情報を整列させることです。私はdisplay:table/cellとvertical-align:middleを試しましたが、注目に値しています。私の投稿は幅が400pxで、その高さは画像の高さがより大きいか小さいかに基づいてautoに設定されています。また、日付のdivの余白が50% autoに設定されていると動作しないことがわかります。それは、いくつかの情報を真ん中に近づけるようにし、小さなポストは、その情報を下に示すようにします。Verticl設定幅と高さを100％に調整

投稿の高さに関係なく、タグ、日付、およびその他の情報を中心に配置して、投稿をカバーするソリッドバックグラウンドカラーの中央に配置するにはどうすればよいですか。

これまでのコードは次のとおりです。

CSS：

body { 
    font-size: 10px; 
    font-family: {font:body}; 
    color: {color:text}; 
    background-color: {color:background}; 
} 

a { 
    color: {color:links}; 
    text-decoration: none; 
    -moz-transition-duration: 0.5s; 
    -o-transition-duration: 0.5s; 
    -webkit-transition-duration: 0.5s; 
    transition-duration: 0.5s; 
} 

a:hover { 
    color: {color:links hover}; 
    -moz-transition-duration: 0.5s; 
    -o-transition-duration: 0.5s; 
    -webkit-transition-duration: 0.5s; 
    transition-duration: 0.5s; 
} 

.container { 
    width: 800px; 
    margin: auto; 
} 

.entries { 
    width: 420px; 
    margin-top: 50px; 
    margin-left: 240px; 
} 

.posts { 
    position: relative; 
    margin-bottom: 20px; 
    padding: 5px; 
    width: 400px; 
    height: auto; 
    background-color: {color:posts}; 
    z-index: 1; 
} 

.posts img, .posts li, .posts ol .posts blockquote { 
    max-width: 100%; 
    height: auto; 
} 

{block:IndexPage} 
div.posts:hover .tags:hover { 
    display: block; 
    padding: 0px; 
    height: 100%; 
    color: #ccc; 
    background-color: #663399; 
    opacity: 1; 
    -moz-transition-duration:1s; 
    -webkit-transition-duration:1s; 
    -o-transition-duration:1s; 
} 
{/block:IndexPage} 

.tags { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 410px; 
    height: 100%; 
    padding: 10px; 
    font-size: 12px; 
    text-align: center; 
    background-color: {color:links hover}; 
    {block:IndexPage} 
    opacity: 0; 
    {/block:IndexPage} 
    z-index: 2; 
} 

.tags a { 
    margin: 2px 4px; 
    color: #fff; 
} 

.tags a:hover { 
    margin: 2px 4px; 
    color: #000; 
    text-shadow: 0px 1px #fff; 
} 

.date { 
    display: inline-block; 
    margin: 50% auto; 
    padding: 5px; 
    font-size: 16px; 
    text-transform: uppercase; 
    text-align: center; 
    font-weight: 700; 
    border: 2px solid #fff; 
    margin-bottom: 5px; 
} 

.reblogs { 
    margin-top: -6px; 
    margin-left: -5px; 
    width: 390px; 
    height: auto; 
    padding: 10px; 
    font-size: 10px; 
    text-transform: uppercase; 
    text-align: center; 
}

HTML：

<body> 
<div class="container"> 

<div class="sidebar"> 
<div class="head"><i class="fa fa-home" aria-hidden="true"></i> <div style="font-size:14px;color:#fff;text-transform:uppercase;padding:0px;margin-bottom:-5px;font-style:bold;">Screamiing Colour</div></div><!--- end head ---> 
<div class="desc">{Description}</div><!--- end desc ---> 

</div><!--- end sidebar ---> 



<div class="entries"> 

{block:ContentSource} 
<!-- {SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}” 
width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” /> 
{/block:SourceLogo} 
{block:NoSourceLogo}{SourceLink} 
{/block:NoSourceLogo} --> 
{/block:ContentSource}{block:ReblogParent} 
{/block:ReblogParent} 



{block:Posts} 
<div class="posts"> 

<div class="tags"><div class="date">{block:Date}<a href="{Permalink}">{Month} {MonthNumberWithZero}, {Year}</a>{/block:Date}</div><br>{block:HasTags}{block:Tags}<a href="{TagURL}"><span style="color:#000;">#</span>{Tag}</a>{/block:Tags}{/block:HasTags} <div class="reblogs">{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a>{/block:RebloggedFrom} &nbsp;{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</div> 
</div><!-- end tags --> 


<!-- TEXT POSTS --> 
{block:Text} 
{block:Title}<h1>{Title}</h1>{/block:Title} 
{Body} 
{/block:Text} 


<!-- ANSWER POSTS --> 
{block:Answer} 
<div class="askerpic"><img src="{AskerPortraitURL-30}"></div> 
<div class="asker">{Asker}</div><div class="ask"> 
<br>sent me something</div> 
<div class="question">{Question}</div> 
<div class="answer">{Answer}</div> 
{/block:Answer} 


<!-- QUOTE POSTS --> 
{block:Quote} 
<div class="tulipwrap quote"><a class="tuliptation" href="{SourceURL}" title="tulips"></a> 
<h3>{Quote}</h3> 
<div class="tulips">&nbsp;- {Source} 
</div></div> 
{/block:Quote} 


<!-- LINK POSTS --> 
{block:Link} 
<div class="lp"><a href="{URL}">{Name}</a></div> 
{block:Description}<div class="ld">{Description}</div>{/block:Description} 
{/block:Link} 


<!-- CHAT POSTS --> 
{block:Chat} 
{block:Title} 
<h1>{Title}</h1> 
{/block:Title} 
<div class="post"><div class="willow"> 
{block:Lines} 
<li class="line {Alt}"> 
{block:Label} 
<span class="label"> 
{Label}</span> 
{/block:Label}{Line}</li> 
{/block:Lines}</div> 
</div> 
{/block:Chat} 


<!-- PHOTO POSTS --> 
{block:Photo} 
{LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-400}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"> 
    <img src="{PhotoURL-HighRes}"> 
</a>{LinkCloseTag} 
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions} 
{/block:Photo} 


<!-- PHOTOSETS POSTS --> 
{block:Photoset} 
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-400}" width="{PhotoWidth-400}" height="{PhotoHeight-400}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div> 
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions} 
{/block:Photoset} 


<!-- VIDEO POSTS --> 
{block:Video} 
{Video-400} 
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions} 
{/block:Video} 


<!-- AUDIO POSTS --> 
{block:Audio} 
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt} 
{block:AudioPlayer} 
{AudioPlayerBlack}{/block:AudioPlayer} 
{block:TrackName} {TrackName} {/block:TrackName} 
{block:Artist} {Artist} {/block:Artist} 
<br> 
{block:Album} 
{Album}<br> 
{/block:Album}{PlayCountWithLabel} 
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions} 
{/block:Audio} 
</div><!--- end posts ---> 

{/block:Posts} 



{block:ContentSource} 
<!-- {SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}” width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” /> 
{/block:SourceLogo} 
{block:NoSourceLogo}{SourceLink} 
{/block:NoSourceLogo} --> 
{/block:ContentSource}{block:ReblogParent} 
{/block:ReblogParent} 



</div><!--- end entries ---> 
</div><!--- end container ---> 
</body>

あなたは、私はアクションで持っているものを見てみたい場合は、私のURLはhttp://motionpicturestory.tumblr.com/

出典

2016-09-03 Stacey

フィーリングを改善する方がよいでしょう。 – jmargolisvt

私はちょうど試しました。 tumblrの{block}要素はサポートしていません。加えて、tumblrリンクのポストはランダムな高さで、私は異なる高さを中心とするコードが必要です。私は、人が高さの高いところで仕事をしたことを見てきました。私はランダムなポストハイトで動作するものが必要です。 – Stacey

である私がtumblrのを知りませんが、 html/cssでは次のようなことができます：

<div class="element"> 
    <div class="text-hover"> 
     Your hover tekst goes here 
    </div> 
</div>

とcss：

.element{ 
    position: relative; 
    display: block; 
} 
.element .text-hover{ 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    text-align: center; 
    transform: translate(0, -50%); 
    -ms-transform: translate(0, -50%); 
    -webkit-transform: translate(0, -50%); 
}

出典

2016-09-03 19:21:26 Manveru

ありがとうございます。これは、私が再コーディングしたときに助けになりました。 – Stacey

Verticl設定幅と高さを100％に調整

答えて

関連する問題