1

HTML

<div class="cs1">
    <span class="cs2">Label</span>
    <span class="cs3"><img src="icon.png" /></span>
    <span class="cs4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
</div>

CSS

.cs1{
    width:600px; 
    height:auto; 
    background-color:#f00; 
    overflow:hidden;
}
.cs2{
    width:170px; 
    float:left;  
    height:100%;
 }

.cs3{
    width:30px;  
    float:left;    
 }
.cs4{
    width:400px;  
    float:left; 
 }

http://jsfiddle.net/Lwmhy/1/

The above code, different lengths of the entered values. So how can I vertically align values in span without using padding?

midstack
  • 2,105
  • 7
  • 44
  • 73
  • do you know the height of the row? (is it always the same?) – Roman Abt May 23 '13 at 08:36
  • no not same, it's changeable, but I use conditional comment for ie7 and change display:inline-block, it's work. Do you think this will cause problems => http://jsfiddle.net/Lwmhy/13/ – midstack May 23 '13 at 08:47
  • i know that inline-block is also problematic in IE7. see http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block ...but i came up with a solution that involves JS to set the height dynamically. see below. – Roman Abt May 23 '13 at 08:50

1 Answers1

2

here is your solved jsFiddle:

Working FIDDLE Demo

the solution is to use table-cell display property (note that this will not work on IE7, but it degrades gracefully):

div span {
    display: table-cell;
    vertical-align: middle;
}

.. and remove the float and the height from the spans...

alternative solution that also works in IE7:

Working FIDDLE Demo

.cs1{
    width:600px;
    background-color:#f00; 
    overflow:hidden;
    position: relative;
}

div span {
    display: block;
    float: left;
}
.cs2,
.cs3{
    width:100px;
    position: relative;
    top: 50%;
    height: 30px;
    margin-top: -15px;
}

.cs3{
    height: 80px;
    margin-top: -40px;
}

.cs4{
    width:400px;  
}

and set the height of the container using javascript (with jQuery in my example):

$('.cs1').height( $('.cs1').height() );

if the rows have a fixed height, you can add the height in the CSS and you do NOT need the javascript:

.cs1{
    width:600px;
    height: 300px;
    background-color:#f00; 
    overflow:hidden;
    position: relative;
}
Roman Abt
  • 444
  • 2
  • 9