Home › Forums › CSS › How to vertically center multi-lined text in fluid responsive thumbnail image?
- This topic is empty.
-
AuthorPosts
-
April 24, 2013 at 9:28 am #44339
mkerny
ParticipantI would like to be able to vertically center multi-lined text in a fluid responsive thumbnail image. This thumbnail scales proportionally when the viewport change sizes. As far as the text layer on top of this thumbnail, I would like so it stays perfectly vertically centered as the viewport responds. Note: I used LESS to originally author my CSS and converted it to vanilla CSS for this question therefore I may have messed a thing or two in the conversion process.
**Mockup of desired result:**
http://d.pr/i/SiIr**Here’s my HTML markup:**
This is an example title spanning multiple lines
By Jon Smith
**CSS:**
article {
width: 100%*(390/1174);
background-color: @color-black;
font-size: 1em;
vertical-align: top;
display: inline-block;
*display: inline;
position: relative;
z-index: 900;
zoom: 1;
line-height: 0em;
}
article:nth-child(2) {
margin-left: 2px; margin-right: 2px;
}
article:nth-child(1), article:nth-child(2) {
margin-bottom: 2px;
}
article a {
display: block;
}
article img {
opacity: .5;
}
article .meta {
position: absolute;
z-index: 500;
top: 0;
bottom: 0 !important;
left: 0;
right: 0;
width: 100%;
height: 20%;
margin: auto;
padding: 0 5%;
color: @color-white;
font-size: 20px;
text-align: center;
}
article .title {
margin: 0;
padding-bottom: 8px;
font-size: 1em;
line-height: 1.15em;
font-weight: 700;
font-weight: bold;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
text-decoration: none;
display: block;
}
article .author {
margin: 0;
font-size: .7em;
line-height: .825em;
font-style: italic;
font-weight: normal;
text-transform: uppercase;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
text-decoration: none;
display: block;
}
article:after {
content: ”;
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}April 24, 2013 at 10:17 am #133021CrocoDillon
ParticipantSomething like: http://www.codepen.io/anon/pen/qGBbD
April 24, 2013 at 10:30 am #133022mkerny
ParticipantWould this work with a fluid image?
April 24, 2013 at 10:45 am #133024Paulie_D
MemberWhy don’t you try it and report back with any problems.
April 24, 2013 at 11:09 am #133028Merri
Participant -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.