html - 设置宽度和高度为 100% 的垂直对齐

标签 html css

我正在研究一个 tumblr 主题。我想让我的标签、日期和其他信息显示在悬停在帖子上的同时用纯色背景填充帖子。我通过在这个网站上搜索答案来完成这一部分。我没有成功的部分是使帖子中心/中间对齐的信息。我已经尝试了 display:table/cell 和 vertical-align:middle 并且注意到了。我的帖子宽度为 400px，高度设置为 auto，具体取决于图片的高度是变大还是变小。您还可以看到，当我将日期 div 的边距设置为 50% auto 时，它不起作用。它使一些信息显示在靠近中间的位置，而较小的帖子则在底部显示信息。

我想问的是，无论帖子的高度如何，如何将悬停时出现的标签、日期和其他信息置于覆盖帖子的纯色背景的中间。

这是我目前的代码。

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>

如果您想看一下我的实际操作，我的网址是 http://motionpicturestory.tumblr.com/

最佳答案

我不知道 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%);
}

关于html - 设置宽度和高度为 100% 的垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39310396/

上一篇：css - 在容器内用 flexbox 填充高度

下一篇：html - 填充列的剩余高度

相关文章：

css - 跨度不在中间垂直对齐文本

jquery - 最后一个 HTML 列表项的圆底 Angular ？

javascript - 使用 JS 循环列表，同时与文本保持一致

html - 使链接与父链接高度相同

html - 媒体查询最小宽度在指定的最小宽度以下不起作用

javascript - 如何将此 jQuery 代码转换为 JavaScript？

CSS 3D 变换行为异常，DIV 变为空白

html - 需要帮助更改索引页面描述文本字体大小，以便我可以将其用作标题和子标题？

javascript - Fullpage.js。如何禁用规范化元素之间的延迟？

html - 仅缩放背景图像

©2024 IT工具网  联系我们