html - CSS 图像居中

标签 html css

我有一个小块和比 block 大的图像宽度。我想 block 中心等于图像中心。

图像中心和 block 中心必须在 1 条垂直线上。我只想看到图像的中心部分。

最佳答案

您可以使用 transform 属性,而不是在图像上使用负边距

.img-container{
  width:100px;
  overflow:hidden;
}
.img-container img{
  transform: translateX(-50%);
}

https://jsfiddle.net/7gk07eLm/2/

关于html - CSS 图像居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35983012/

相关文章:

html - <hr> 在页脚上方的页面底部

html - 需要用 CSS 为占位符设置 "display; none"<div class ="sticky-element-placeholder sticky-element-active"

html - 添加图像以使用 CSS 链接

css - 设置表格内的间距

javascript - 如何将 animate.css 动画与 Vue 的 Transition 和 TransitionGroup 组件一起使用

javascript - 动画鼠标轨迹

html - Bootstrap 4 order Masonry-like column cards 水平而不是垂直

html - 我可以在 CSS 中检测 child 的数量,而 child 的数量将超过四个吗?

javascript - 弹出式表格不起作用

php - 在 WordPress 中添加侧边栏