Question

I’m currently working with the seaofclouds ‘Tweet’ plugin on a website that I’m building:

http://tinyurl.com/c88fx5j

The Tweet plugin is prebuilt utilizing jQuery & CSS and I’ve figured out how to style the plugin to my liking via CSS, but the li items not being vertically aligned with the Twitter user’s Avatar is throwing me off and I haven’t been able to figure it out.

I’d like to vertically align the li text in the mdidle with the Twitter avatar to the left of each post, how can this be done?

My CSS:

   .tweet,
.query {
    font: 14px sans-serif;
    color: #000000;
}

    .tweet_list {
        -webkit-border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow-y: hidden;
        background-color: #fff;

    }


        .tweet_list li {
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0.5em;
            list-style-type: none;
            vertical-align: middle;         
            display: inline-block;


        }


        .tweet_list li a {
                color: #0099FF;
                text-decoration:underline;
                padding-right: 5px;
            }

        .tweet_list .tweet_even {
            background-color: #fff;
        }

        .tweet_list .tweet_avatar {
            padding-right: 15px;
            float: left;


        }

            .tweet_list .tweet_avatar img {

                width:60px;
                height:60px;

            }

HTML is brief, just a wrap to contain the Tweets:

/*Tweet*/

    #tweet-wrap {   
        padding-top: 20px;
        padding-bottom: 160px;
        width: 960px;
        height: 160px;
        margin-left: auto; 
        margin-right: auto;
        overflow: hidden;

    }

Your help is much appreciated.

Answer 1

You’ll need to change the following styles in the appropriate css files,

.tweet_list li {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5em 0;
    list-style-type: none;
    vertical-align: middle;
    display: table;
}

.tweet_list .tweet_avatar {
    margin-right: 15px;
    float: left;
    padding: 0;
}

.tweet_time {
    display: table-cell;
    vertical-align: middle;
    height: 57px;
    min-width: 108px;
    padding-right: 3px;
}

.tweet_join {
    display: table-cell;
    vertical-align: middle;
    min-width: 56px;
    padding-right: 3px;
}

.tweet_text {
    display: table-cell;
    vertical-align: middle;
}

PS: the css fix for the ... functionality (we discussed in chat), doesn’t work for sentences/nested html elements, so you’d probably have to do it in jQuery.