<分区>
Logo 和图像在同一行。但填充顶部只是问题。检查 fiddle 。 http://jsfiddle.net/6Rpkh/443/
<img class='likeordislike' src='image'><h4 class='liketext'>Twitter</h4>
问题是图片下方的文字。所以我想放在图像的中间。填充样式不适用于此
<分区>
Logo 和图像在同一行。但填充顶部只是问题。检查 fiddle 。 http://jsfiddle.net/6Rpkh/443/
<img class='likeordislike' src='image'><h4 class='liketext'>Twitter</h4>
问题是图片下方的文字。所以我想放在图像的中间。填充样式不适用于此
最佳答案
首先请注意,您的图像类是 likeordislike
,但您的选择器是 likeordisklike
(带有一个额外的 k
),因此它永远不会应用.您还需要从中删除 width
(以防止拉伸(stretch)),并给它一个更高的 height
。
现在图像已经排序,文本可以通过以下方式垂直居中对齐:
display: inline-block
height
等于您要对齐的高度vertical-align: middle
这可以从以下方面看出:
img.likeordislike {
height: 50px;
margin-right: 4px;
}
h4.liketext {
color: #F00;
display: inline-block;
height: 50px;
vertical-align: middle;
}
<img class='likeordislike' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAjCAMAAAA3znPYAAAAXVBMVEVVrO7///9yuvHu9/36/P5st/Dm8/1br+/K5fp3vfGQyfSFw/OazvXX6/tmtPD1+v6m0/bg8PyUy/Ss1/fQ6Pq43PjE4vnF4/me0PWm1Pa93/h1vPGJxfPk8vzZ7PuSFyAkAAABYElEQVQ4jYXU67aCIBAFYIY7qKhJZZq+/2Mejzdk0Nw/WivXZ+6mCQLXKbVRtGOHK+TS8sYoQojqq9mzpl50WbEUy4xsoQUvPo6Wi/bEcoxZT0KcmV7qtUlFUm5JHFfAWMz6O73L4jIe4+ZlvnLWc0PhjzpHWiki5NJkfWouw+wowemHtXezP27z0mG8NP3XdaiX+3KeCNZqDL/OcQD08fSDxE2UD5oJNAGhsC42zTUbTPKt0P31rnvR5vjDUATbm+DhnsTArvW9zoPm/a1+Bw3+pjVx7KChu9EWjhp0uhjH6FgD636MnPJYf2z7Q3cQa7z9UQxHGtprvO7IUXP8RwypINFT9YuhZ3CmoW5Nn95BL88q3iSaSrjQ4yPBJsJBM23TGhYdeQTYq9NdY0VCiXsCYM3f5zuiconxst/6m5wfIh8Tu/ceng/j1t5KZO3r5IyOZlLWnRXKmdbL5Hze8gfIkQ1q4RZTDwAAAABJRU5ErkJggg=='>
<h4 class='liketext'>Twitter</h4>
关于html - 同一行问题上的 Logo 和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48858667/