Title: Title vertical alignment
Last modified: January 31, 2017

---

# Title vertical alignment

 *  Resolved [morfe1](https://wordpress.org/support/users/morfe1/)
 * (@morfe1)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/title-vertical-alignment/)
 * Hi, it’s me again.
 * I’m tryign to display it in 2 columns with the images on the left and titles 
   on the right.
    But because of the different length the titles are not always 
   100% aligned with the image. I’ve tried using padding but didn’t find a way to
   make if look nice with any posts. Most of them look good though. example
 * [https://hidemyage.staging.wpengine.com/infini-skin-tightening/](https://hidemyage.staging.wpengine.com/infini-skin-tightening/)
 * Do you know if there’s a way to do so?

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

 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/title-vertical-alignment/#post-8722004)
 * There are styles added in the PiS widget itself and in the WP Custom CSS plugin.
   It would be better to use only a place for them.
 * Anyway, add these styles in WP Custom CSS:
 *     ```
       #pis_posts_in_sidebar-3 li {
       	margin-bottom: 10px;
       	overflow: hidden;
       }
   
       #pis_posts_in_sidebar-3 .pis-thumbnail {
       	margin-bottom: 0;
       	height: auto;
       }
       ```
   
 * Then, in WP Custom CSS change this rules:
 * from:
 *     ```
       #pis_posts_in_sidebar-3 > ul > li:nth-child(1) > p.pis-title {
           padding-top: 10px;
           padding-bottom: 0px;
       }
       ```
   
 * into:
 *     ```
       #pis_posts_in_sidebar-3 > ul > li:nth-child(1) > p.pis-title {
           padding-top: 0px;
           padding-bottom: 0px;
       }
       ```
   
 * and from:
 *     ```
       #pis_posts_in_sidebar-3 > ul > li > p.pis-title {
           padding-top: 20px;
           padding-bottom: 10px;
           margin-bottom: 0px;
       }
       ```
   
 * into:
 *     ```
       #pis_posts_in_sidebar-3 > ul > li > p.pis-title {
           padding-top: 0px;
           padding-bottom: 10px;
           margin-bottom: 0px;
       }
       ```
   
 * Also change this:
 * from:
 *     ```
       img.pis-thumbnail-img.alignleft.wp-post-image {
           margin-bottom: 0;
           position: relative;
           width: 150px;
           height: 100px;
       }
       ```
   
 * into:
 *     ```
       img.pis-thumbnail-img.alignleft.wp-post-image {
           margin-bottom: 0;
           position: relative;
           width: 150px;
           height: auto;
       }
       ```
   
 * In this way the titles will be perfectly aligned at top of the images.
 *  Thread Starter [morfe1](https://wordpress.org/support/users/morfe1/)
 * (@morfe1)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/title-vertical-alignment/#post-8726003)
 * Yes, I was trying to align them with the **center**of the image but it seems 
   to be no way to do that without parent div containers for each element. It works
   on the home page, where I’m pulling the exact 4 posts. But on the single posts
   it’s pulling different posts and I can’t apply same padding to all titles due
   to the differences in the length.
 * Thanks for the overflow though, didn’t know about it.
    -  This reply was modified 9 years, 4 months ago by [morfe1](https://wordpress.org/support/users/morfe1/).
 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/title-vertical-alignment/#post-8731517)
 * You have at least two active widgets of the plugin. So, please, follow these 
   steps:
 * 1) Make a backup of your current CSS styles (just in case…). Take note that you
   have multiple places where you have entered styles for Posts in Sidebar, so search
   for them.
 * 2) Remove every CSS style for Posts in Sidebar, for example:
 *     ```
       #pis_posts_in_sidebar-2 .pis-title { font-size: 18px !important; }
       ```
   
 * and multiple others. You have styles either in the widget admin and in WP Custom
   CSS plugin.
 * 3) Paste this styles in a Posts in Sidebar widget or in your current theme’s 
   styles.css file or in WP Custom CSS plugin:
 *     ```
       #pis_posts_in_sidebar-2 ul.pis-ul,
       #pis_posts_in_sidebar-3 ul.pis-ul {
           margin-top: 1em;
           margin-left: 1em;
           line-height: 1.2;
           list-style: none;
       }
   
       #pis_posts_in_sidebar-2 li,
       #pis_posts_in_sidebar-3 li {
           margin-bottom: 10px;
           overflow: hidden;
           width: 315px;
           height: 105px;
           position: relative;
       }
   
       #pis_posts_in_sidebar-2 .pis-thumbnail,
       #pis_posts_in_sidebar-3 .pis-thumbnail {
           margin-bottom: 0;
           height: auto;
           height: 105px;
           overflow: hidden;
           width: 150px;
           position: absolute;
       }
   
       #pis_posts_in_sidebar-2 p img.pis-thumbnail-img.alignleft.wp-post-image,
       #pis_posts_in_sidebar-3 p img.pis-thumbnail-img.alignleft.wp-post-image {
           margin-bottom: 0;
           margin-top: 0px;
           max-width: 100%;
           height: auto;
           display: block;
       }
   
       #pis_posts_in_sidebar-2 > ul > li > p.pis-title,
       #pis_posts_in_sidebar-3 > ul > li > p.pis-title {
           padding-top: 0px;
           padding-bottom: 0px;
           margin-bottom: 0px;
           position: absolute;
           width: 157px;
           height: 105px;
           display: table;
           left: 157px;
       }
   
       #pis_posts_in_sidebar-2 a.pis-title-link,
       #pis_posts_in_sidebar-3 a.pis-title-link {
           display: table-cell;
           vertical-align: middle;
       }
       ```
   
 * These styles, among other aspects, will center the text and the image.
 * Let me know, please.
 *  Thread Starter [morfe1](https://wordpress.org/support/users/morfe1/)
 * (@morfe1)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/title-vertical-alignment/#post-8738807)
 * That’s awesome, thank you very much! Worked like a charm.
 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/title-vertical-alignment/#post-8740071)
 * You’re welcome! 😉

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

The topic ‘Title vertical alignment’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/posts-in-sidebar_aed6f1.svg)
 * [Posts in Sidebar](https://wordpress.org/plugins/posts-in-sidebar/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/posts-in-sidebar/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/posts-in-sidebar/)
 * [Active Topics](https://wordpress.org/support/plugin/posts-in-sidebar/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/posts-in-sidebar/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/posts-in-sidebar/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/title-vertical-alignment/#post-8740071)
 * Status: resolved