Question

同一行上的徽标和图片。但是填充顶部只是问题。检查小提琴。 http://jsfiddle.net/6Rpkh/443/

 <img class='likeordislike' src='image'><h4 class='liketext'>Twitter</h4>

问题是图像下方的文字。所以我想放在图像的中间。填充样式不起作用

Answer 1

首先请注意，您的图片类为likeordislike，但您的选择器为likeordisklike（附加k），因此永远不会应用。您还需要从中移除width（以防止拉伸），并让它更高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>

同一行问题上的徽标和图像

1 个答案: