nsdlfefinedieicbe nsdlfefinedieicbe - 4 months ago 11
HTML Question

display text and image in single line

enter image description here

we are using below code to display text in one line and image in below line.

what i tried is

position : relative: top: xxpx; bottom: xxpx;
but i think its bad way of coding.

enter image description here

html

<div class="cc51">
<?php echo $this->__('Add/Change Background color'); ?>
<div class="cc55"><img src="<?php echo $this->getSkinUrl('images/circle.PNG') ?>" alt="image upload button" /></div>
<br/>
</div>


css

.cc51 {
margin-top: 40px;
font-size: 24px;
}
.cc55 {

}

Answer

The best way if you need to support older browsers is simply like this, where the white-space: nowrap; keep them in 1 line even on smaller screen sizes

.cc51 {
  font-size: 24px;
  white-space: nowrap;
}
.cc55 {
  display: inline-block;
  vertical-align: middle;
}
<div class="cc51">                  
  Add/Change Background color
  <div class="cc55"><img src="http://placehold.it/35/f00" alt="image upload button"/>
  </div>
</div>

And you could drop the inner div

.cc51 {
  font-size: 24px;
  white-space: nowrap;
}
.cc51 img {
  vertical-align: middle;
}
<div class="cc51">                  
  Add/Change Background color
  <img src="http://placehold.it/35/f00" alt="image upload button"/>  
</div>

Even the img could be dropped

.cc51 {
  font-size: 24px;
  white-space: nowrap;
}
.cc51:after {
  content: url(http://placehold.it/35/f00);
  vertical-align: middle;
  display: inline-block;
}
<div class="cc51">                  
  Add/Change Background color
</div>