垂直对齐<;李>;文本及&书信电报;img>;使用Tweet jQuery插件
我目前正在构建一个网站,使用seaofclouds“Tweet”插件: Tweet插件是利用jQuery&CSS预先构建的,我已经知道了如何通过CSS根据我的喜好设计插件,但是li项没有与Twitter用户的头像垂直对齐,这让我很反感,我还没有弄明白 我想将mdidle中的li文本与每篇文章左侧的Twitter头像垂直对齐,如何做到这一点 我的CSS:垂直对齐<;李>;文本及&书信电报;img>;使用Tweet jQuery插件,jquery,html,css,Jquery,Html,Css,我目前正在构建一个网站,使用seaofclouds“Tweet”插件: Tweet插件是利用jQuery&CSS预先构建的,我已经知道了如何通过CSS根据我的喜好设计插件,但是li项没有与Twitter用户的头像垂直对齐,这让我很反感,我还没有弄明白 我想将mdidle中的li文本与每篇文章左侧的Twitter头像垂直对齐,如何做到这一点 我的CSS: .tweet, .query { font: 14px sans-serif; color: #000000; }
.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;
}
/*Tweet*/
#tweet-wrap {
padding-top: 20px;
padding-bottom: 160px;
width: 960px;
height: 160px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
HTML很简短,只是一个包含推文的包装:
.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;
}
/*Tweet*/
#tweet-wrap {
padding-top: 20px;
padding-bottom: 160px;
width: 960px;
height: 160px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
非常感谢您的帮助。在检查您的代码后,我认为您只需要在您的
tweet\u列表中为每个li
指定行高,应该可以:
ul.tweet_list li {
line-height: 4em;
}
希望有帮助:)
已更新
好的,第一个解决方案在超过一行文本的情况下看起来很糟糕,我在这里有点懒,所以如果我是你,我将使用此解决方案,尝试此方法,并告诉我此方法是否有任何错误:
.tweet_list li .tweet_time, .tweet_join, .tweet_text {
position: relative;
top: 20px;
}
您需要在相应的css
文件中更改以下样式
.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:用于..
功能的css修复程序(我们在聊天中讨论过)不适用于句子/嵌套html元素,因此您可能必须在jQuery中执行此操作。感谢您的输入-这有助于将第一行文本居中,但第二行溢出&距离顶部太远。查看我的web链接以获取结果。更新为原始CSS-关闭但不完全关闭,感谢您的输入。您提供的链接中的文本看起来很好(垂直对齐)。是的,刚刚看到,有一些CSS,行高:4
,请删除,这将,然而,你的垂直对齐会变得一团糟。html
结构是你做的吗?还是自动生成的?让我们来看看