垂直对齐图像

2023-12-28

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

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

这是纯 CSS,垂直对齐图像,如果图像比包含框更高(或更宽),还会缩小图像的大小。因此,框和图像都可以是任意大小,而不会破坏垂直对齐。另外,您可能需要添加左边距<p>标签以防止它们被图像隐藏。

CSS

/* Positioning */
.absoluteCenterWrapper {
    position: relative; /* Contains the image in the div */
}
.absoluteCenter { /* Aligns image vertically */
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}
.absoluteCenterWrapper p { /* Pushes <p> to edge of image */
    margin-left: 101px; /* Width of image */
}
.absoluteCenter { /* Specifies width of image to avoid overlap if image changes */
    width: 101px; /* Width of image */
}

/* Sizing - resizes down to avoid cutting off */
.absoluteCenter {
    max-height: 100%;
    max-width: 100%;
}

/* Making it "pretty" */
.absoluteCenterWrapper { margin: 1em; padding: 0.001em; /* <- Hack to contain margins */ outline: 1px solid red; }
.absoluteCenterWrapper p { margin-top: 1em; margin-bottom: 1em; padding-left: 1em;}
<div class="absoluteCenterWrapper">
 <img class="absoluteCenter" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAXCAMAAAAlSHE3AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA2/AAANvwELq/fgAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAjFQTFRF/38A/4AB/4AC/4ED/4EE/4IF/4IG/4MH/4MI/4QJ/4QK/4UL/4UM/4YN/4YO/4cP/4cQ/4gR/4gS/4kT/4kU/4oV/4oW/4sX/4sY/4wZ/4wa/40b/40c/44d/44e/48g/5Ai/5Ej/5Ek/5Im/5Mo/5Qp/5Qq/5Ur/5Us/5Yt/5Yu/5cv/5cw/5gy/5kz/5o1/5o2/5s3/5s4/5w6/508/54+/58//59A/6BB/6FD/6FE/6JF/6JG/6NH/6NI/6RJ/6RK/6VL/6VM/6ZN/6ZO/6dP/6dQ/6hR/6lT/6pV/6pW/6xZ/61c/65d/65e/69g/7Bi/7Fj/7Jl/7Jm/7Nn/7No/7Rp/7Rq/7Vr/7Zt/7Zu/7dw/7hy/7p2/7t3/7t4/7x5/717/718/759/75+/79//7+A/8GD/8GE/8KF/8KG/8OH/8OI/8WL/8WM/8aO/8eQ/8iR/8iS/8mT/8mU/8qV/8uX/8uY/8yZ/8ya/82b/82c/86e/9Ch/9Ci/9Gj/9Km/9Oo/9Sp/9Sq/9Ws/9at/9ew/9ix/9mz/9m0/9q1/9u4/9y6/969/96+/9+//9/A/+DB/+LG/+TK/+XM/+bN/+bO/+fP/+jR/+nT/+nU/+rV/+vX/+vY/+za/+3b/+7e/+/f//Dh//Di//Hk//Po//Tp//Tq//Xr//Xs//bu//fv//jx//jy//nz//n0//r1//r2//v3//v4//z5//z6//37//38//79//7+////1DEj+QAAAndJREFUSInt1NlfTHEYx/HPNKYaSkVZRkyqGUq2CUOyDDUqe4U4kX3fyb5FliJOirIMQkWSmpnM9Px1buZMZ/Kai2644Ln6vZ7f9znvi+ecA//rHy+jOw+AdPdkfXuKpwQ2e8aN9nGZnhXasdyTEG4nyDUANohLn54uW6BaEker2KVUO9ZI0t9VJq2tWmqKVGIclSWWcH5hOjDLYYRERzIwo6xivgEwO1LjF+9MCykLty01R1cqfsg3eZmhVyzN0unz7tDyb+6B4avkQ7lkwN6fA93SOBFsssfj719gl1KIvS1fetpPRSgNTqfT6TwmLiiUG/aYlR2qXnnY6yTutiwK5c9/MTBXug9AXQeslotjWOO9BTbxbTUa4+xSCopsx3AgEKFo5YIXPWOBfTJ7WMmSw0BCT0MoXyx57H5fq2Loug7PPpmAC0PTscnd8F4+NgG0Ryh1VqvValXERYy/RVEU5Yy4hxW3LAFo7AjlkwPVPLmyzm/OkfXQdQegSAqxiaIp4+QQwNkoe0mVD6qqqqq6aliplFyAmwPaQEtj3EBZSnC5IpOJCdYC5MtGbLJJU6yyC+BQtO33XdbaYWWVLAdoeqvdnOgrHEqj5eSj18CneoAyWaxXYoPHAC5FUx53poxUpg5eBSz+m9pAgajtcLzt+zmgvjcZuN8/Qa/Q9gowfY6mZHlbCyxZxQ/ide/YhWCN1dHqn6kNmH1yBpaJFAFzgs3zMo7KESKUErmemV3fE/V7yXkuIr4Gk06JPT0o8s4RHuCpuCDeG0gCWPZRxHfQGKlQ5ZPArf06ZWSNn59tHtGKnTMtahxm5Jp+b8bljfrf9L/+bP0CQB36KehprcoAAAAASUVORK5CYII=">
 <p>Paragraph goes here.</p>
 <p>Paragraph goes here.</p>
</div>
<div class="absoluteCenterWrapper">
 <img class="absoluteCenter" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAXCAYAAAASloEFAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAANvwAADb8BC6v34AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAWSSURBVGiB7Zl7TNVlGMc/5xwunsNN7kSEIISIhiSFNS+IGrREdGmmmzlb5kpZy7k2c20utfqndP1hTsPL1paVa2Yz84aIpZSoaCp5g4OAiAICQtwPpz8e2Ln+OCBndebOdzv77fe87/O8l+/zPs/z/o7KuB4jbrgU1P/3BNywhZsUF4SbFBeEmxQXhC0pag0kzoOIFPsa/lHS7hs+9NF8IyD3GiTNN8lSlonMy2fo9lwNQfGylvgsx31T3+5bt69Nky0pHlpYtB/SVtk3FjNd2iOfG+KMAY0nhIwB7wCTTBskMtVjcGg1Xn3r83fcVxssfdUam6bHYCceP3g41ZpPGERNgoBoqCuFyt/B0P1otlRqeDINIiZAWz1UFUFLjWO9qEnw8A48rDbJwsaBlx/UFEOvQWTefhA6DuqvQUeTqW9ANES9ACNGQm0J1JwDo9lVzlML4RPgwS3oajXN8cp3jucV8Sw0XIfqPwbs6jxSUldA1mbJDR1Nsqi7JfDDAmgsH5otv0hYsBdGTYPWe2ILIxxZA8VfDaw7dxfcvwr7Fsq7SgXLCkEXDDsnQ9UZkY9fBHN2wJdxJlKmfggZG8SRulrBJxRuHoL9S6GtQfqMjIHlRXB8LaS8CYGx0NsD1X+KjjU0XjB3JyQvEedSaeBhFZQdVVyCMim+T0j+sEboWFtZXCbM2Q4lu+HM5+J9cZmQvU02aY8dOwMhe5sUGnsyoOIkeHhDTh7M3gr3/pITqITyfHhmsZBhNIp36oLhnzoYPdNESuxMaKowOczTr8DMT+HsVjj8vmx0QjYs3AdZW4QYc0z/GA6tgot75F3tAYFxtvN5fqUQ8stKKN4m85r2EaSvV1yCck5JmA3LCmx/U9fZ9p31GbQ3wqFcCVvGXrh1GC7kQUw6hI1X3kRrBCfAmBwo2iKEAPR0wsF3ZYwpawfW1+eDLkRCDMDoWRJqSvcJESAbE5shBPZj8gfQXAVHVgshADcOyhqSl0DAU5bjXD8AF3ZKOOw1yBzt4cXVoD8hhIA4SuFGqLuquATlk3Llezmi1kicBy9vMb2r1LLptZckhJlDGyzPoHi4f0VxKAuEJsmzosBS3tUK1UWSHwZCRaFsUuwMqL0opOhPQPlxmLhcckJQvOQ/vRkpoUlCknUOLDsGabkQMlZI60dVkeO1ePlIjirZZdumL4DwZLtqyqR0tcjxtkZbveW7Nkjipi5ECLNGRSEYFLzIHvrvP+2N9sf2cXA/6miCuxckVBVvhegp4u0VJyXERE+RBA9CFohj6UKgQ2FM83n1o/2B47XoQpXXYm+sPgw/0bfVixeXHYWD7wzbHM2V8vQNh3tWbf5R0HzbsQ19vnj3qHTwGCGnrr0Ras5LCAsbJ8VAa98Axl6p2OwR7h8lz6ZBjGuNlhqxbe+i7RuhqOace0rlaTkl2sDh26q9KCEk6TVLuV+kePmds45tlOfLTXnqOrh/WZI8SAiLzxKyzEMXiN24l/oqPTOMfx262wYffs1h6JLCZEyOpVzjCQlzFNWcQ8qv78GIAHjjmMRwv0hJ2IlzYdFP4q2DRctdOL8dJr4lSX1kjNwbFv8s7YUbHNuoOi2JNybdMpnr86Wq8/azlAOc2ihELj4AkakQOBpmbIKxr0LR5sGFK3s4tUlybk6e5LKQRJi/Fzx1iirOuac03ICv0yB7Oyw9ZpL3dIp3Gg1Ds3dkjehmbJDKDqDhJuxOhwdljvW726X0jc2wPBGVp6GnA9SecLvQUqf2EnyTKSX8inOm+Resh98+Gdr8zVH6o1SlmV+Io/Ua4PK3QvSMjXZVVE7/59HbX77pdLZI/O9uf3RbGi+5F7XVS8z/rxAQLWGs/u9H/yJhDQ9vqeAay2RvBoDzSXFj2HB/kHRBuElxQbhJcUH8Cxuwzh5I0D/eAAAAAElFTkSuQmCC">
 <p>Paragraph goes here.</p>
 <p>Paragraph goes here.</p>
 <p>Paragraph goes here.</p>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

垂直对齐图像 的相关文章

  • TransitionEnd 事件未触发?

    我有多个元素 每个元素都以 某种程度上 持续时间进行动画处理 我使用 CSS3 过渡 jQuery 库和transitionend辅助函数来自大卫 沃尔什 https davidwalsh name css animation callba
  • jQuery:如何将 jQuery 日期选择器放入 Bootstrap Popover 中? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我试图在引导弹出窗口中显示 jquery datepicker 并尝试了解决方案引导程序弹出窗口内的日期选择器 关闭 https
  • 角度材料在一个表单字段中输入和选择

    I want the input field and the drop down field in the same area like the one on the left I did this on the inspector 无论我
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • 角度按钮单击旋转图标

    我有以下按钮
  • 避免滚轮被嵌入的 youtube / flash 视频劫持

    我正在对主页中嵌入 YouTube 视频的网站进行一些改进 我自己没有添加此代码 但它看起来像
  • FontAwesome 与 PrimeFaces

    我一直渴望在 Primefaces 中包含 FontAwesome 图标 最后 Optimus 昨天发布了这个伟大的新图标 gt http blog primefaces org p 3004 comment 5422 http blog
  • Bootstrap中.row类的负左右边距

    只是出于好奇 为什么 bootstrap 使用 15px左和右margins 将取消15px左和右padding on container and container fluid类 为什么要设置内边距 然后在子项上使用负边距取消它 行上的负
  • 如何使用div绘制曲线?

    我需要使用 CSS 绘制两条曲线 我尝试过组装一些divs 使用CSSborder radius绘制弧形面板 但结果很糟糕 还有更好的算术吗 正如我之前在评论中提到的 请不要使用CSS用于实现复杂的曲线和形状 虽然仍然可以使用 CSS 来实
  • 简化 CSS 代码

    我怎样才能简化这段代码 user panel subscribe user panel faves user panel tags user panel title user panel calendar a user panel item
  • CSS3 转换会立即发生吗?

    我有一个名为 artwork需要动画化 artwork webkit transition all 20s ease in transition all 20s ease in width 75 display block margin 0
  • 交替 div 使图像向左(偶数)或向右(奇数)

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section
  • 如何实现右边缘倾斜的 div? [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一
  • 如何设置引导开关的 css 颜色?

    如何在此引导开关中将蓝色更改为另一种颜色 我尝试更改输入元素的颜色和背景颜色 但它没有更改开关颜色 这是 html 和 bootstraplink https getbootstrap com docs 4 2 components for
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • 是否可以在没有 Javascript(仅 CSS)的情况下执行相同的操作(悬停效果)?

    我正在尝试创建一个带有图标的按钮像这样 http jsfiddle net pRdMc HTML div div class icon div span Send Email span div CSS button width 270px
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互
  • CSS:缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的

随机推荐

  • 将累积平均函数应用于分组对象

    我有一个数据框df其中每条记录代表一场足球比赛 团队将多次出现 我需要计算每个团队得分的某种滚动平均值 嗯 不完全是字母上的滚动平均值 date home away score h score a 166 2013 09 01 Fulham
  • 代码优先 - 当我没有将父对象设置为 EntityState.Modified 时,如何保存 ICollection?

    如果我有以下课程 public class Foo public int PropertyIWantUpdated get set public int PropertyIDontWantUpdated get set public ICo
  • JMeter 不会从 CSV 文件中读取引用的 CSV 列表

    使用 JMeter 支持功能 API 测试 并遇到了从 CSV 文件读取数据的问题 文件中的数据用于构建 POST 数据体 其中包含如下内容 wibbles wibble var wibble var 从 CSV 文件读取 格式如下 wib
  • Python + GTK:如何在 gtk.treeview 上设置选定行

    I m trying to do a keyboard command When I insert S some number Return I need call a function that will see this number
  • iPhone 的 JavaScript 默认值?

    iPhone 或 iPad 上 Safari 的 JavaScript 默认值是什么 我的意思是 safari 是否默认打开或关闭 javascript 如果它关闭 那么是否可以通过编程方式更改该设置 谢谢 默认情况下启用 JavaScri
  • Eclipse Juno 图形错误?

    我一直在谷歌上寻找解决方案 但我什至不知道应该使用哪些词来找到它 无论如何 我的问题是 Eclipse 在 Linux Mint 14 x64 中看起来像这样 https i stack imgur com BBfyg png https
  • 如何正确捕获 SqlException:发生传输级错误

    我正在得到一个SqlException在 NET 3 5应用程序的日志中 我正在寻找相应的数字 属性值SqlException Number System Data SqlClient SqlException A transport le
  • MVC 具有继承、嵌套 viewModel 和部分视图的复杂模型绑定

    我无法将嵌套模型的值返回到控制器 它们都是空的 这是简化的架构 The viewModel being passed to the view public class RunnerIndexViewModel public Register
  • Angular 路由、直接 URL 导航

    我在我的上定义了一个角度应用程序index html文件 使用角度路由我正在路由一个名为 erez加载带有模板的视图 它在应用程序内部工作 当我单击链接时 erez从导航栏上index html它工作完美 但是当我在地址栏上直接访问 my
  • BASH - 在 shell 脚本上获取 UID 不起作用[重复]

    这个问题在这里已经有答案了 你好 我有一个关于 bash 的问题 我是新手 我制作了一个名为 test sh 的文件 其内容是 bin bash set x echo UID echo UID echo id u 结果是空白的 什么也没有出
  • java远程执行批处理文件

    我想执行位于服务器远程的bat文件 testserver someFolderName test bat 我正在使用进程生成器并想更改目录procbuilder directory 但未能成功 任何帮助表示赞赏 谢谢 过去我做得又快又脏PS
  • PARTITION BY 在 H2 数据库中不起作用

    我正在使用 PARTITION BY 子句对结果进行排序 这个问题提到了使用 PARTITION BY 的详细信息Sql 对多列进行排序 https stackoverflow com questions 13897024 sql orde
  • R 的 mtcars 数据集中的第一列是什么?

    我认为我缺少有关 R 数据框架的基本概念 head mtcars mpg cyl disp hp drat wt qsec vs am gear carb Mazda RX4 21 0 6 160 110 3 90 2 620 16 46
  • 如何使用导入包的结构作为 go 中的类型

    我正在一个项目中工作并在 go 中使用 database sql 包 我想使用在包 database sql 中声明的结构 DB 作为我的 func 的参数 这样我就可以使用 sql Open 的返回值并作为我的 func 的参数 有可能吗
  • 与 2017 年智能感知不工作 C# 和 XAML

    我有一个奇怪的问题 我似乎无法解决 我的 XAML 智能感知不再显示 并且后面的代码仅显示预制成员 我所做的类和方法没有出现 此外 Visual Studios 无法识别其他页面 也无法识别导航 我尝试转到 工具 gt 文本编辑器 gt C
  • C# SqlCommand Connection.Open() 问题

    我有一个 C ASP NET Web 应用程序 我正在尝试使用数据库表中的列填充 ASP DropDownList My Code using System using System Collections Generic using Sy
  • Android Studio - 如何更改布局

    在 Eclipse 中 我可以右键单击我的布局 例如 LinearLayout 然后单击 更改布局 在 Android Studio 中 我没有看到类似的东西 我确实看到了变形 但现在它会随时出现 例如 如果您使用RelativeLayou
  • Windows 上的 Nginx 使用 WSGI

    现在我决定使用 Nginx 作为我最喜欢的网络服务器来部署 Django 我得到了一些 迷雾 我在 Windows 上 也就是说 当我尝试使用 Django 作为 FastCGI 时出现错误 似乎 Flup 无法加载 它给我错误 从网站上看
  • QSqlDatabase::open() 总是返回 true

    我正在尝试使用 Qt 框架连接到 SQL 数据库 不幸的是 尽管没有建立连接 db open 总是返回true 您可以设置任何密码 主机名等 我从对数据库没有任何影响的查询中得出这一点 我在 Ubuntu 14 04 上使用 LAMPP 我
  • 垂直对齐图像

    我有一个包含图像和 p 标签的 div 如下所示 我想根据段落的行数将图像垂直对齐在 div 中间 垂直对齐不起作用 我现在正在使用 JavaScript 来计算要添加到 margin top 的量 但更愿意使用 CSS 有任何想法吗 di