html - 如何将两个div放在同一行?

标签 html css

我用了两个div... 一个用于显示图像...... 一个用于显示文本...

对于第一个 div,我设置了用于设置背景图像的背景图像属性... 当然,将显示属性设置为内联...... 但问题是它们在同一条线上,但并不完全相同......

    <div class="div_with_image"></div>
    <div style="display:inline">Text</div>

这是CSS文件

.div_with_image{
  background-image: url(../beacon/images/icon-plus.png);
  width: 16px;
  height: 16px;
  cursor: pointer;
  display: inline-block; 
}

但是图像显示得比文字略高......我无法解决它...... 我需要你的帮助... 谢谢,扎克。

最佳答案

这是由于行高造成的。 如果你给一个元素添加高度,它里面的文本到底在哪里?也就是说,

如果在 60px 的容器内有一个 font-size: 10px(理论高度:10px)的文本 block ,文本到底会出现在哪里?

最肯定的是在容器的顶部,因为文本只能将自己定位在文本流动的地方,即高度:10px 的空间内。

但是您可以通过使用与容器高度相同的行高值来克服这个问题,这样文本将采用垂直对齐属性并正确对齐自身

礼貌:安德烈斯·伊利奇

关于html - 如何将两个div放在同一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17104053/

相关文章:

events - CSS3 转换会延迟事件捕获/冒泡吗?

html - 自定义形状周围的 CSS 框阴影?

html - 获取html文件的最后修改日期

javascript - CGI 程序可以将控制权返回到弹出窗口而不是父屏幕吗

jQuery 在悬停时加载 div 并能够与该 div 交互

javascript - ajax 响应后我的 javascript 停止工作

html - 水平列表的左对齐元素

javascript - 表格内带有自定义元素的 AngularJS ng-repeat 渲染异常

javascript - CSS Slider 解析问题

html - 如何将此 div 中的内容居中?