Aligning various sizes of Images that do not have a parent container

Question

My problem: How can I "center" the images so that the left alignment looks clean?

I just realized that I did not plan the icons of different sizes on the site, and I wonder if there is a quick, non-hacker solution. Due to the size of the project, I can’t edit HTML in any way.

I'm fine with decisions Psudeoandcalc

edit: setting a fixed width causes a noticeable blur on the site and / or makes higher icons too small

jsFiddle http://jsfiddle.net/vantbrhb/

Answer 1

position:absolute; h5, left;

Jsfiddle

Answer 2

, :

.content img {
     width: 55px;   
}

Answer 3

, HTML - . , "src". 3- :

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;
}

Answer 4

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;
}

Fiddle

Answer 5

, 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";
}

: http://jsfiddle.net/vantbrhb/6/

Answer 6

The code is not beautiful, but if you can add the identifier # img1, img2, # img3 and # img4 for each img, then the following code should do the trick:

#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;
}

Answer 7

You could use a CSS table layout, it would be better to wrap imgin spanor so, but it still works without doing this.

jsfiddle

.container {
    margin: 0 auto;
    width: 50%;
    display: table;
    border-collapse: separate;
    border-spacing: 0 1px;
}
.content {
    display: table-row;
    background: pink;
}
img, h5 {
    margin: 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    padding-right: 5px;
}
h5 {
    width: 100%;
    border-left: 1px solid black;
    padding-left: 5px;
}

<div class="container">
    <div class="content">
        <img src="http://placehold.it/50x50" />
        <h5>Header 1</h5>
    </div>
    
    <div class="content">
        <img src="http://placehold.it/55x49" />
        <h5>Header 2</h5>
    </div>
    
    <div class="content">
        <img src="http://placehold.it/48x52" />
        <h5>Header 3</h5>
    </div>
    
    <div class="content">
        <img src="http://placehold.it/50x54" />
        <h5>Header 4</h5>
    </div>
</div>

Run codeHide result