html - 同一行问题上的 Logo 和图像

标签 html css

<分区>

Logo 和图像在同一行。但填充顶部只是问题。检查 fiddle 。 http://jsfiddle.net/6Rpkh/443/

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

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

最佳答案

首先请注意,您的图像类是 likeordislike,但您的选择器是 likeordisklike(带有一个额外的 k),因此它永远不会应用.您还需要从中删除 width(以防止拉伸(stretch)),并给它一个更高的 height

现在图像已经排序,文本可以通过以下方式垂直居中对齐:

这可以从以下方面看出:

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/

相关文章:

javascript - 为什么 wysihtml5 没有加载到我的文本区域中?

javascript - jquery css 不动态应用

html - 试图在 html 中显示元素符号文本

jquery - 如何在 css3 或 jquery 中将背景图像加载为滚动

html - 如何在 bulma 中切换选项卡

javascript - 直接在 HTML 中建立简单的客户端模板

html - 在 ul 中选择第一个子 anchor 元素

html - 现场直播时造型不适用于移动设备

javascript - 将样式添加到 textarea 的特定行

javascript - 行的替代背景颜色