Title: Vertical Alignment question
Last modified: August 30, 2016

---

# Vertical Alignment question

 *  Resolved [blindpet](https://wordpress.org/support/users/blindpet/)
 * (@blindpet)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/vertical-alignment-question/)
 * Hi Hector, loving this plugin but noticed a minor thing. I don’t see an option
   for vertically aligning titles for this plugin or your other one which is an 
   issue for short post titles.
 * Any way to add it as an option?
 * > [Install ownCloud 8.x Raspberry Pi for Personal Dropbox • – Internet Explorer](https://imgur.com/ED8R4F0)
 * [https://wordpress.org/plugins/recently/](https://wordpress.org/plugins/recently/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/vertical-alignment-question/#post-6293225)
 * Hi there!
 * If we were talking about [HTML tables](http://www.w3.org/TR/html401/struct/tables.html)
   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](https://www.google.com/search?btnG=1&pws=0&q=css+vertical+align+image+multiple+lines+text&gws_rd=ssl).
 * 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:
    3.      ```
            $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> '
              : '';
            ```
        
    4.  and change it to:
    5.      ```
            $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> '
              : '';
            ```
        
    6.  Hit the _Update file_ button to save changes.
    7.  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.
    8.  Find:
    9.      ```
            /* Thumbnail styles */
            .recently-thumbnail {
            	display:inline;
            	float:left;
            	margin:0 5px 0 0;
            	border:none;
            }
            ```
        
    10. and change it to:
    11.     ```
            /* Thumbnail styles */
            .recently-thumbnail-wrapper {
            	display:inline;
            	float:left;
            	margin:0 5px 0 0;
            }
        
            	.recently-thumbnail {
            		border:none;
            	}
            ```
        
    12. Find:
    13.     ```
            /* Title styles */
            .recently-post-title {
            }
            ```
        
    14.  and change it to:
    15.     ```
            /* Title styles */
            .recently-post-title {
            	display: table-cell;
            	width: 300px; /* <-- adjust this value! */
            	height: 50px; /* <-- adjust this value! */
            	vertical-align: middle;
            }
            ```
        
    16. … 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.
    17. 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](http://oi58.tinypic.com/2ijj2ty.jpg) 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](http://www.w3.org/TR/html4/struct/lists.html#h-10.2).
 * Give it a shot and let me know how it goes!
 *  Thread Starter [blindpet](https://wordpress.org/support/users/blindpet/)
 * (@blindpet)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/vertical-alignment-question/#post-6293467)
 * 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.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Vertical Alignment question’ is closed to new replies.

 * ![](https://ps.w.org/recently/assets/icon-256x256.png?rev=1188315)
 * [Recently](https://wordpress.org/plugins/recently/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/recently/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/recently/)
 * [Active Topics](https://wordpress.org/support/plugin/recently/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/recently/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/recently/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/)
 * [vertical-align](https://wordpress.org/support/topic-tag/vertical-align/)

 * 2 replies
 * 2 participants
 * Last reply from: [blindpet](https://wordpress.org/support/users/blindpet/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/vertical-alignment-question/#post-6293467)
 * Status: resolved