同一行问题上的徽标和图像[重复]答案

【问题标题】：Logo and image on same row issue [duplicate]同一行问题上的徽标和图像[重复]
【发布时间】：2018-07-29 05:53:30
【问题描述】：

徽标和图像在同一行。但仅在顶部填充问题。检查小提琴。 http://jsfiddle.net/6Rpkh/443/

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

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：