当前位置: 首页 > 面试题库 >

垂直对齐图像

公孙威
2023-03-14
问题内容

我有一个包含图像和ap标签的div(如下所示)。我想根据段落的多少行在div的中间垂直对齐图像。垂直对齐不起作用。我现在正在使用JavaScript找出要添加到margin-
top的数量,但是宁愿使用CSS。有任何想法吗?

<div>
    <img>
    <p>Multi-line</p>
</div>

问题答案:

尝试将元素的line-height属性设置为p图像的高度,例如:

div p {
  line-height: 18px;
}

编辑: 刚意识到我读错了问题,却错过了p多行的事实。尝试的一种选择是img完全删除元素,并将其设置为background- imageof的p,使用的background-positionof left, center。就像是:

div p {
  background: transparent url(path/to/img) no-repeat left center;
  padding-left:30px; /* Set based on width of image */
}


 类似资料:
  • 垂直对齐 1. grid-template-areas 属性值保持换行,并使用空格保持每列垂直对齐。 例如: .foo { grid-template-areas: "header header" "nav main" "footer ...."; } 2. grid、grid-template

  • 问题内容: 我在浮动div中有一个img,但我不知道如何垂直居中。 垂直对齐:当然中间不起作用。 问题答案: 要在父元素中垂直对齐文本,并谨记的是一个内联元素等行为 类似 文本,你可以简单地设置到父元素: 。

  • 在CSS中,行框的高度总是足以容纳它包含的所有行内级框,当一个行内级框 B 的高度小于包含它的行框高度时,则由 vertical-align属性 来决定B在行框中垂直对齐的位置。因此,vertical-align属性只对行内级元素有效,对块级元素无效。并且,该属性不能被子元素继承。 在垂直对齐时,行内非替换元素的行内级框是由 line-height 的高度定义的框,即在内容区的上下各添加半行距后的

  • 问题内容: 我在div中垂直对齐图像时遇到问题 据我所知,我需要“显示:块;” 定位图像在中心,这是可行的。同样在教程中,我找到了很多答案,但它们并不是“有用的”,因为我的所有图像都不在同一高度! 问题答案: 如果容器中的高度固定,则可以将line-height设置为与高度相同,并且它将垂直居中。然后只需添加text-align使其水平居中即可。 编辑 您的代码应如下所示: 更新 现在是2016年

  • 问题内容: 如何在容器中对齐图像? 例 在我的例子,我需要垂直居中的在用“: 的高度是固定的,图像的高度是未知的。如果这是唯一的解决方案,则可以添加新元素。我正在尝试在Internet Explorer 7和更高版本的WebKit,Gecko上执行此操作。 在这里查看jsfiddle 。 问题答案: 唯一的(和最好的跨浏览器)的方式,因为我知道是使用佣工,并在这两个元素。 因此,有一个解决方案:h

  • 问题内容: 嗨,我想放置一个图像,该图像的垂直和水平居中对齐,我的HTML标记是 完成所有这些操作后,我将无法执行操作。请看一下并帮助我。 问题答案: 有几种方法可以使元素水平和垂直居中,这取决于情况和您的喜好。 使用以下标记: 行高 好的快速修复方法,不会使您太费时间,但是如果实际上将文本居中,则可能会出现问题。 显示:表格单元 就像好的旧表一样工作并且高度灵活,但是仅在现代浏览器中受支持。 位