程序员经验分享-hwhale

在 HTML 中正确对齐图像和文本

2024-04-22

This is the example: enter image description here

我想对齐image与名称并排，但不知何故，图像只是浮得更高一点。有什么帮助吗？

UPDATE:

#profile_name_header {
  background-color: #006400;
  font-family: Century Gothic;
  color: #FFFFFF;
  font-size: 20px;
  padding-bottom: 12px;
  padding-top: 12px;
  padding-left: 10px;
}
<div id="profile_name_header">
  <img src=< ?php echo "./img/".$genderprofile. ""; ?> style = "height:30px; margin-bottom:0px;" >
  <?php echo $fullname;  ?>'s Profile
</div>

谢谢。


Use vertical-align on the img因为它是相邻的内联内容。

img {
    vertical-align: middle;
}
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> @Dranreb

一种更奇特的方法是使用 Flexbox，但它对于您的用例来说太过分了。如果你想这样做，只需给他们一个父母，然后使用align-items影响垂直对齐。

div {
  display: flex;
  align-items: center;
}
<div>
  <img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> @Dranreb
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

在 HTML 中正确对齐图像和文本 的相关文章

  • 我可以使用 jQuery 动态创建文件（及其内容）吗？ [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li

  • 如何使用 Materialise 创建具有居中对齐链接的导航栏？

    我正在尝试使用 Materialise 构建一个顶部有导航栏的 1 页垂直滚动网站 现在 Materialize 仅具有用于向左或向右对齐链接的类 徽标可以居中对齐 但不能居中对齐链接本身 我一直在向 UL 和包装 div 添加中心对齐和中

  • 每页都包含菜单

    假设我有一个简单的 CSS 布局 我的菜单是侧面的一列 此菜单将出现在每个网页上 大约 10 个网页 如果我在这个菜单上有链接等形式的项目 我怎样才能做到这样 如果我在一页上添加链接 它会将其添加到所有页面 你能把它做成一个 PHP 页面吗

  • 如何将元素浮动到水平居中元素的左侧或右侧？

    对于分页 我想使用元素的水平对齐方式 如下所示

  • Javascript 考虑 colspan 和 rowspan 获取表格单元格二维数组

    我有一个带有 colspan 和 rowspan 的表 如下所示 5x3 表 table tr td 1 td td 2 td td 3 td td 4 td tr tr td 5 td td 6 td td 7 td tr tr td 8

  • Tomcat 基本 URL 重定向

    使用tomcat 如何获取请求http www mydomain example重定向到http www mydomain example somethingelse index jsp 我什至没有设法获得要显示的index htmlhtt

  • 如何在购物车中显示自定义属性（Magento）

    我尝试了很多东西 但没有一个起作用 我想我可以在产品页面上获取自定义属性 但我想知道 如何在购物车页面中获取它们 属性只是简单的文字 item gt getProduct gt load 将从数据库重新加载所有产品数据 虽然这可行 但请记住

  • 数据库中的 HTML 标签是不好的做法还是好的做法？

    有时我需要格式化来自数据库的特定数据或部分数据 例如 如果我有这样的 desc 存储在数据库中 HTML 4 经过调整 延伸和增强 超出了其最初的范围 为网站带来了高水平的交互性和多媒体 Flash Silverlight 和 Java 等

  • Socket.io 如何判断某人何时离开

    我正在使用 socket io 创建一个实时游戏 目前 当有人离开时 什么也不会发生 我想以某种方式通知服务器说谁离开了 有没有办法在用户离开时发出正确的信息 我可以让服务器每 1000 毫秒对每个人执行一次 ping 操作 或者通过其他方

  • 如何在 的每四个循环项之后添加

    我想在循环中的每第四个数字项之后退出循环 我想创建一个二十人的名单 在每一个tr应该是4个人 So I want to break from the loop after every 4th number of loop My one tr

  • 使用 python 将 bibtex 文件转换为 html （也许是 pybtex？）

    您好 我想解析 bibtex 出版物文件并对特定字段 例如年份 进行排序并过滤某些内容 然后将其放在网站上 我遇到了 pybtex 它可以读取和解析 bibtex 文件 但它基本上没有记录 我不知道如何对条目进行排序 pybtex 是可行的

  • 使用他们的 API 创建一个基本的 MailChimp 注册表单

    我是 MailChimp 的新手 需要一些帮助 通过他们的基本时事通讯注册表单 您只需将一些预先打包的 HTML 嵌入到您的页面中即可 然而 这样做的问题是 单击 提交 会重定向到 MailChimp 页面 我不想重定向到 MailChim

  • 使用 RGBA 颜色覆盖背景图像，并使用 CSS3 过渡

    今天早些时候我问使用 rgba 背景颜色覆盖背景图像 https stackoverflow com q 17134929 1544337 我的目标是拥有一个带有背景图像的 div 当有人将鼠标悬停在 div 上时 背景图像会覆盖有 rgb

  • html 元视口标签

    我建立了一个html登陆页面 你可以看到它here http tzabar exactive co il 我以这种方式使用元视口标签 当我从手机进入这个页面时 页面宽度不适合屏幕 iPhone 示例 http mobiletest me i

  • HTML 选择框，从 servlet 中选择数据

    再会 我在 html 中的选择框上遇到问题 我位于简单 CRUD 项目的编辑部分 在用户可以编辑之前 将首先显示所选数据 然后我通过 servlet 在数据库中检索它 现在我希望我检索的数据成为我的选择框中选定的数据 默认 product

  • 如何在 html 画布上使文本适合精确的宽度？

    如何在 html5 画布上将单行文本字符串调整为精确的宽度 到目前为止我尝试过的是以初始字体大小编写文本 测量文本的宽度measureText my text width 然后根据我想要的文本宽度和实际文本宽度之间的比例计算新的字体大小 它

  • :目标选择器不适用于选项标签

    我试图在这里帮助一位 StackOverflow 成员 我发现 CSS target选择器不适用于选项标签 我创建了一个示例来说明使用w3schools 教程 http www w3schools com cssref tryit asp

  • 恢复默认的CSS属性

    我正在编写一个可在多个网站上使用的组件 每个网站都有自己的样式表 并且以不同的方式显示某些内容 我的所有 html 都包含在一个带有 id 的 div 中 div div 然而 我的组件是在所有网站上看起来一致 这很好 因为我将样式应用于组

  • 插入四个空格而不是制表符

    我试图在按下 Tab 键时插入四个空格 我正在使用以下代码 请参阅spaces t 但是当我将其切换到spaces 当我按 Tab 时只插入一个空格 我还尝试了 function textarea keydown function e va

  • 为什么插入符号在具有position:relative的contenteditable中不可见？

    When a contenteditable元素有position relative和背景颜色 插入符号放置在该元素中时是不可见的 这是一个例子 bug position relative background color lightgre

随机推荐

  • 更快的位图对比度算法

    我有一个带有轨迹栏滑块控件的工具 用于调整图像的亮度 对比度 伽玛值等 我试图在用户拖动滑块时实时更新我的 图像 亮度和伽玛算法的速度是可以接受的 大约170ms 但对比算法大约是380ms 基本上我的表单是一个带有滑块的工具窗口 每次更新

  • 循环遍历一组谷歌工作表值

    我有2组数据 一是坦克名称 Tank Name A1 A2 B1 B2 接下来是开 关数据 ON OFF 0 1 1 1 1 1 0 0 1 1 1 1 1 1 1 0 0 1 1 1 0 1 1 现在我要查看的结果是 当ON OFF为1时

  • 将鼠标悬停在 Shiny 中的元素上时如何更改绘图？

    我正在寻找一种解决方案 当用户将鼠标悬停在同一面板中的超链接上时 可以更改 Shiny 应用程序中的绘图 这是一个简单的例子 library shiny words lt sort sapply 1 50 USE NAMES F FUN f

  • 由于 istio-sidecar 注入，Kubernetes 部署失败

    我们的 K8 集群工作了一年多 最近它出现了一些奇怪的行为 现在当我们使用kubectl apply f deployment manifest yaml 它没有显示在kubectl get pods 但显示在kubectl get dep

  • 从 ggraph 网络图表中检索节点坐标

    假设我制作了这个图表 library ggraph library igraph my chart lt graph from data frame highschool set seed 2017 ggraph my chart layo

  • React - 组件内动态创建列表项

    有什么办法可以添加动态li元素融入我的ul列表 我想添加我的li单击按钮 这是示例代码 class Component1 extends React Component constructor super add let ul docume

  • 如何在一个解决方案中为两个单独的项目在 asp.net core 中设置路由？

    我创建了两个 asp net core mvc 项目 它们分别工作正常 每一个在其 startup cs 文件中都有自己的路由 当我启动它们时 它们运行良好 我的问题是 如何从第一个项目设置第二个项目路线 我应该在第一个项目中更改哪里 我应

  • 如何使用 Microsoft.Office.Interop.Excel 从 Excel 导入数据集？

    我想做的事 我正在尝试使用Microsoft Office Interop Excel名称空间 http msdn microsoft com en us library microsoft office interop excel 28v

  • 在 iPhone 中点击按钮时打开文件对话框

    我做了一个可可应用程序 其中在可可应用程序中使用 NSOpenPanel 控制器点击按钮时打开文件对话框 对于 ipad 应用程序 我们使用 UISplitViewController 我想知道 在 iPhone 中开发应用程序时 点击按钮

  • 如何将引导日期选择器放入我的表单中并在日期参数中包含值？

    我正在使用 bootstrap datepicker js 并且它工作正常 div class well div class input append date div div

  • 问答：我如何知道该月的最后一天是哪一天？

    我试图编写一个自己的时区转换器 我需要一种方法来确定该月的最后一天是哪一天 经过一番研究 我发现了查找闰年的公式 这是一个小小的贡献 但也许我可以为其他人节省 20 分钟的时间来弄清楚并应用它 此代码接受带符号的短月份 索引为 0 0 是一

  • ORACLE Select Distinct 返回许多列，其中

    我有一个看起来像这样的表 NAME Col1 Col2 Col3 Tim 1 2 3 Tim 1 1 2 Tim 2 1 2 Dan 1 2 3 Dan 2 2 1 Dan 2 1 3 我试图创建一个 SELECT 命令 结果如下 NAME

  • R 中的线性插值

    我有一个真实数据的数据集 例如如下所示 Dataset 1 with known data known lt data frame x c 0 6 y c 0 10 20 23 41 39 61 plot known x known y t

  • UIImage 内存未释放 VM：ImageIO_JPEG_DATA？

    我在屏幕上同时有多个水平滚动的集合视图 它们都充满了图像 所有这些图像都通过 Parse api 在后台加载 我正在运行 Instrument 的分配 并且匿名 VM ImageIO JPEG DATA 类别占用了大部分正在使用的内存 应用

  • linux终端动画-延迟打印“帧”的最佳方法（C语言）

    我正在为终端开发一个简单的 pong 克隆 并且需要一种方法来延迟 帧 的打印 我有一个二维数组 screen ROWS COLUMNS 以及打印屏幕的函数 void printScreen int i 0 int j while i lt

  • 与 Matlab 相比，Numpy 加载 csv 太慢

    我发布这个问题是因为我想知道我是否做了一些非常错误的事情才能得到这个结果 我有一个中等大小的 csv 文件 我尝试使用 numpy 来加载它 为了便于说明 我使用 python 创建了该文件 import timeit import num

  • 使用 Angular 5 和 RxJS 观察带有过滤器的数组

    我正在创建一个简单的论坛 我正在寻找过滤帖子 我在 RxJS 中使用 pipe 和 filter 时遇到一些问题 我试图 从内存中检索 api 帖子列表api posts 当与 http get 一起使用时 它返回一个Observable

  • Android appbarlayout 海拔出现在状态栏中

    如何消除状态栏中的高度 如果我在 AppbarLayout 中将 app elevation 设置为 0dp 则标高不再出现在状态栏中 但也不会出现在 AppbarLayout 下方 如何获取 AppbarLayout 下的高度 这是我的意

  • Rails/Devise - 我应该使用 devise 和 rspec 测试什么？

    许多程序员使用 devise 作为他们的身份验证解决方案 我想得到他们的建议 设计已经经过测试 但我想知道是否需要自己测试一些东西 集成 单元 功能测试 以便与我的知识进行标准设计集成 我不熟悉shoulda和cucumber 但我了解一些

  • 在 HTML 中正确对齐图像和文本

    This is the example 我想对齐image与名称并排 但不知何故 图像只是浮得更高一点 有什么帮助吗 UPDATE profile name header background color 006400 font famil

热门标签