Vertical Alignment question

Hi there!

If we were talking about HTML tables and cells, aligning images and text vertically would be a breeze ?? However, with pure CSS is quite a different story since there’s no native support for this. You have to use workarounds to achieve that effect.

With that being said, here’s a workaround for your specific case – thumbnails and post titles only:

1. Go to Plugins > Editor and select Recently from the dropdown.
2. We’re going to add a new CSS class to Recently. Find:

   $thumb = ( !empty($thumb) )
     ? '<a ' . ( ( $this->current_post_id == $post->ID ) ? '' : 'href="' . $permalink . '"' ) . ' title="' . esc_attr($title) . '" target="' . $this->user_settings['tools']['markup']['link']['attr']['target'] . '" rel="' . esc_attr($this->user_settings['tools']['markup']['link']['attr']['rel']) . '">' . $thumb . '</a> '
     : '';

   and change it to:

   $thumb = ( !empty($thumb) )
     ? '<a ' . ( ( $this->current_post_id == $post->ID ) ? '' : 'href="' . $permalink . '"' ) . ' title="' . esc_attr($title) . '" target="' . $this->user_settings['tools']['markup']['link']['attr']['target'] . '" rel="' . esc_attr($this->user_settings['tools']['markup']['link']['attr']['rel']) . '" class="recently-thumbnail-wrapper">' . $thumb . '</a> '
     : '';

3. Hit the Update file button to save changes.
4. Now, we’re going to modify Recently’s stylesheet. Go to Plugins > Editor and select the recently.css stylesheet (recently/style/recently.css) to edit it.

   Find:

   /* Thumbnail styles */
   .recently-thumbnail {
   	display:inline;
   	float:left;
   	margin:0 5px 0 0;
   	border:none;
   }

   and change it to:

   /* Thumbnail styles */
   .recently-thumbnail-wrapper {
   	display:inline;
   	float:left;
   	margin:0 5px 0 0;
   }
   
   	.recently-thumbnail {
   		border:none;
   	}

   Find:

   /* Title styles */
   .recently-post-title {
   }

   and change it to:

   /* Title styles */
   .recently-post-title {
   	display: table-cell;
   	width: 300px; /* <-- adjust this value! */
   	height: 50px; /* <-- adjust this value! */
   	vertical-align: middle;
   }

   … where width needs to be manually adjusted to be the width of your sidebar minus the width of the thumbnail. The height parameter should match the height of your thumbnails.

5. Hit the Update button to save changes.

This workaround isn’t perfect, though. If the title is really long, it’ll overflow (here’s a screenshot to see what I mean).

Alternatively, you could also enable the Custom HTML markup feature to modify the HTML and make it a table instead of an unordered list.

Give it a shot and let me know how it goes!

Sorry Hector I never found time to do this. I’d like to make a donation to you to make this an optional setting in Recently and Popular posts. You can get in touch with me through my site so I make sure I send you an appropriate donation size.