raulbaros raulbaros - 3 months ago 11
CSS Question

Align text and image side by side at horizontally centered level

I am trying to align horizontally text+image+text+image side by side.
The below code works when all elements are text but with images in between I cannot get it right.
Also, all text has to always centered at 50% of the height of the largest image in the row, like in below example img1. The width I set in my CSS, but the height is auto, so variable, so I dont know how to make the text positioned at 50% of the height of the largest image. How to do it?

IMG1



.merc {
font-size:11px;
font-weight:700;
/*margin-left:10px;*/
color:#777 !important;
display:inline-block;
max-width:35%
}

.merc-image-two img {
display:inline-block;
max-width:25%;
height:auto;
padding-left:5px;
}

.merc-image img {
display:inline-block;
max-width:15%;
height:auto;
padding-left:5px;
}

#wrapper {
max-width:100%
}

<div id="wrapper">
<div class="merc">
MERC MERC MERC
</div>
<div class="merc-image">
<img alt="#" src=
"http://lorempixel.com/50/50"></div>
<div class="merc">
MERC MERC MERC
</div>

<div class="merc-image-two">
<img alt="#" src=
"http://lorempixel.com/100/100">
</div>
</div>




Answer

Maybe so:

.merc {
	font-size:11px;
	font-weight:700;
	/*margin-left:10px;*/
	color:#777 !important;
	display:inline-block;
    vertical-align: middle;
	max-width:35%
}

.merc-image-two {
	display:inline-block;
    vertical-align: middle;
	max-width:25%;
	height:auto;
	padding-left:5px;
}

.merc-image {
	display:inline-block;
    vertical-align: middle;
	max-width:15%;
	height:auto;
	padding-left:5px;
}

#wrapper {
	max-width:100%
}
<div id="wrapper">
			<div class="merc">
                    MERC MERC MERC
                </div>
                            <div class="merc-image">
							 <img alt="#" src=
                    "http://lorempixel.com/50/50"></div>
  <div class="merc">
                    MERC MERC MERC
                </div>
                
                <div class="merc-image-two">
                     <img alt="#" src=
                    "http://lorempixel.com/100/100">
                </div>
				</div>

Comments