- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
March 1, 2014 at 2:43 am #10231jaeeun-leeParticipant
I have an image and text next to each other in a div. I’m trying to align the text vertically aligned in the middle, but it stays on top. Please help!
HTML:
<div class="title-block"> <div class="img-holder"><img width="101" height="104" src="http://www.test.com/test.jpeg" /></div> <div class="title">Get Your Nose Out of Your IPhone</div> </div>
CSS:
.title-block { width:272px; height: 110px; vertical-align:middle; } .img-holder { float: left; margin: 0 6px 0 0; position: relative; } .img-holder img { display: block; } .title { display:block; text-transform: uppercase; margin: 8px 0 9px; }
March 1, 2014 at 2:51 am #10234junmParticipantYou can use
table
andtable-cell
: And move yourclass='title'
insideimg-holder
With padding left away from
image
– fiddle.title-block { width:272px; height: 110px; } .img-holder { margin: 0 6px 0 0; position: relative; display: table; } img, .title{ display:table-cell; vertical-align: middle; } .title { text-transform: uppercase; margin: 8px 0 9px; }
March 1, 2014 at 2:51 am #10232suchan-leeParticipantUsing vertical-align: middle won’t work on a div.
Something like this might work:
<table class="title-block" style="background-image:url('http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg); background-size: cover; background-position: center center;"> <tr> <td class="title" style="vertical-align: middle;"> Get Your Nose Out of Your IPhone </td> </tr> </table>
March 1, 2014 at 3:00 am #10233jellyficationParticipantI changed your div to span for
vertical-align: middle
to work.See Fiddle: http://jsfiddle.net/9KDva/4/
CSS:
.vam { vertical-align: middle; } span.vam { display: inline-block; }
HTML:
<div class="title-block"> <span class="img-holder vam"> <img width="101" height="104" src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image" alt="url-16" /></span> <span class="title vam">Get Your Nose Out of Your IPhone</span> </div>
-
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.