Html 对齐没有父容器的不同大小的图像

我的问题：如何将图像居中，使标题左对齐看起来干净

我刚刚意识到我并没有在一个网站上设计不同大小的图标，我想知道是否有一个快速、非黑客的解决方案。由于项目的大小，我将无法以任何方式编辑HTML

我同意Psudeo和calc解决方案

编辑：设置固定宽度会导致网站上出现明显的模糊和/或使较高的图标过小

JSFIDLE

---

您可以尝试添加此类，并查看图像的显示方式：

.content img {
     width: 55px;   
}

你可以给位置：绝对；与h5对齐，然后与左侧对齐

---

代码并不漂亮，但是如果您可以为每个img添加img1、img2、img3和img4的ID，那么下面的代码应该可以做到这一点：

#img1 {
    padding-left: 6px;
    padding-right: 5px;
}
#img2 {
    padding-left: 3px;
    padding-right: 3px;
}
#img3 {
    padding-left: 7px;
    padding-right: 6px;
}
#img4 {
    padding-left: 6px;
    padding-right: 5px;
}

---

我不知道你不能修改HTML-忽略我的上一篇文章。下面是一个伪选择器，它应该基于src选择每个图像。希望第三次的魅力：

img[src*="placehold.it/50x50"] {
    padding-left: 6px;
    padding-right: 5px;
}
img[src*="placehold.it/55x49"] {
    padding-left: 3px;
    padding-right: 3px;
}
img[src*="placehold.it/48x52"] {
    padding-left: 7px;
    padding-right: 6px;
}
img[src*="placehold.it/50x54"] {
    padding-left: 6px;
    padding-right: 5px;
}

---

从img中删除边框和填充，并添加以下样式：

.content {
  position: relative;
  overflow: hidden;             /*prevent tall lines from overflowing containers */
}

.content h5 {
  position: absolute;
  left: 70px;                   /*wider than your widest image */
  top: 50%;                     /*center vertically            */
  transform: translateY(-50%);  /*  "        "                 */
}

.content h5:before {
  content: '';
  position: absolute;
  height: 1000px;               /*really tall!         */
  top: -500px;
  left: -5px;                   /*for a little padding */
  border-left: 1px solid black;
}

---

您可以使用一些简单的javascript实现这一点，如下所示：

function getWidth(){
var width1 = document.getElementById('img1').offsetWidth;
var width2 = document.getElementById('img2').offsetWidth;
var width3 = document.getElementById('img3').offsetWidth;
var width4 = document.getElementById('img4').offsetWidth;
width1 = 70 - width1;
width2 = 70 - width2;
width3 = 70 - width3;
width4 = 70 - width4;
document.getElementById('img1').style.paddingRight = width1 + "px";
document.getElementById('img2').style.paddingRight = width2 + "px";
document.getElementById('img3').style.paddingRight = width3 + "px";
document.getElementById('img4').style.paddingRight = width4 + "px";
}

---

请参阅fiddle:

您可以进行CSS表格布局，最好将img封装到span中，但不这样做仍然可以工作

.集装箱{ 保证金：0自动； 宽度：50%； 显示：表格； 边界塌陷：分离； 边界间距：0 1px； } .内容{ 显示：表格行； 背景：粉红色； } img，h5{ 保证金：0； 显示：表格单元格； 垂直对齐：中间对齐； } img{ 右侧填充：5px； } h5{ 宽度：100%； 左边框：1px纯黑； 左侧填充：5px； } 标题1 标题2 标题3 标题4

---

你可以给他们一个固定的尺寸和高度。如果它们的大小大致相同，就不应该有太大的拉伸或任何东西。在现场，模糊是相当明显的Legotcha。我不确定。我不想那样！对不起，很好！我非常感谢您的努力，所以说您不能更改任何HTML是否安全？虽然这会解决问题，但会导致图像像素化：/+1尽管您在某种程度上是正确的，更新了我的初始问题以包括span。我注意到我不能把它放在一个div中，但我应该说我不能把它放在一个普通的div中，更新了我原来的问题。我最初写道，我不能将它们包装在div中，但我真的不能修改HTML，因为有多少图标。对不起，我没那么快和你沟通好吧，很抱歉，这次我想我有办法了！好主意！绝对认为这是一种退路！！