html - 将 img 定位在容器外但在 Bootstrap 3 的行内

标签 html css twitter-bootstrap twitter-bootstrap-3 background-image

我有一个包含普通 Bootstrap 设置的页面 .container > .row > .col。我想在我的 col-6 列旁边放一张图片,它“突破”了容器,但它在行内(基本上是全 Angular 容器),因为列中的文本需要垂直对齐到图像的中间。

描述我需要的图片:

enter image description here

我不为容器使用背景图像的原因是因为定位。我不希望图片滑到文本后面。

许多“工作原理”页面都有类似的设置,例如 https://setapp.com/?utm_medium=affiliate+program&utm_source=43&utm_campaign=macpaw.com

最佳答案

您应该能够将 display: flex;align-items: center; 放在行上。

参见 https://davidwalsh.name/css-vertical-center-flexbox

关于html - 将 img 定位在容器外但在 Bootstrap 3 的行内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45403488/

相关文章:

css - 如何让动画播放后有一些延迟时间?

javascript - 单击其他按钮时如何删除 jQuery .css()?

html - text-overflow 生成的省略号位置不符合预期

html - Spring MVC - CSS 未被导入

javascript - 在 Bootstrap 按钮上使用 JavaScript 模拟用户点击事件

javascript - 使用innerHTML没有效果

jquery - Font Awesome 图标不会移动

javascript - <img src ='img.png'> 不显示本地文件( react )

javascript - Vue.js 2.x v-for 在 <table> 中不起作用(属性或方法未定义)

html - 如何在字体中使用抗锯齿