display text and image in single line

Question

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.

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 {

}

@LGSon it should support for older versions too. can you please help me for which answer is better in below answers. — fresher, Jul 18 '16 at 10:14

Sagar Kodte · Answer 1 · 2016-07-18T10:25:44.867

3

Just add inline-flex

cc51{
   display:inline-flex;
 }

use above code in your css or you can use below css

or you can also use below css.

     .cc51{
       float:left;
     }
     .cc55{
       float:right;
     }
     .cc54{
        clear:both;
     }

edited Jul 18 '16 at 10:25

answered Jul 18 '16 at 10:08

Sagar Kodte

3,723
4
23
52

please check here also : http://stackoverflow.com/questions/39719035/display-dropdown-menu-items-in-next-column – fresher Sep 27 '16 at 09:53

score 1 · Answer 2 · answered Jul 18 '16 at 10:09

1

You can either use (on the text element like , add class to "Add/Change Background colour")

display: inline-block;

Or you can float the elements to the left/right

float: left;

Just don't forget to clear the floats after

clear: left;

answered Jul 18 '16 at 10:09

Ave

4,338
4
40
67

Mihai T · Answer 3 · 2016-07-18T10:10:43.370

1

use

.cc51
{
 margin-top: 40px;
 font-size: 24px;
 display:flex;
 align-text:center;
}

this way the image will be aligned centered to the text

see here : jsfiddle

edited Jul 18 '16 at 10:10

answered Jul 18 '16 at 10:09

Mihai T

17,254
2
23
32

score 1 · Answer 4 · answered Jul 18 '16 at 10:10

1

Please try to add following css

.cc51 {
  margin-top: 20px;
  font-size: 24px;
  float: left;
}
.cc55 {
  float: right;
}

answered Jul 18 '16 at 10:10

vignesh

951
5
13

score 1 · Answer 5 · answered Jul 18 '16 at 10:10

You can use display: inline-block for both text and image to show in one line.

.cc51 .text,
.cc51 .cc55 {
  display: inline-block;
  vertical-align: top;
}

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

Ivan · Answer 6 · 2021-01-09T09:51:26.637

1

I went on the site you've linked in the post and the following code works:

.cc55 {
   display: inline-block;
   vertical-align: middle;
}

edited Jan 09 '21 at 09:51

answered Jul 18 '16 at 10:11

Ivan

34,531
8
55
100

No worries, you are flooded with answers ;) – Ivan Jul 18 '16 at 10:12

Siddharth vyas · Answer 7 · 2016-07-18T10:11:56.233

1

Set position (float) as per you requirement

cc51 img{
     display:inline; float:right; vertical-align: middle;
 }

edited Jul 18 '16 at 10:11

answered Jul 18 '16 at 10:11

Siddharth vyas

104
9

Asons · Accepted Answer · 2016-07-18T10:32:28.180

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>

@nsdlfefinedieicbe Added 2 more samples, with a cleaner markup — Asons, Jul 18 '16 at 10:27

score 1 · Answer 9 · answered Jul 18 '16 at 11:02

You can use display:inline-flex

.cc51
 {
     display:inline-flex;
 }

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

display text and image in single line

9 Answers9