以单行

Question

我们使用下面的代码在一行中显示文本，在下面的行中显示图像。

我尝试的是position : relative: top: xxpx; bottom: xxpx;，但我认为它的编码方式很糟糕。

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 1

只需添加 inline-flex

即可

cc51{
   display:inline-flex;
 }

在你的css中使用上面的代码，或者你可以使用下面的css

或者您也可以使用以下css。

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

Answer 2

您可以使用（在文本元素上，将类添加到“添加/更改背景颜色”）

display: inline-block;

或者你可以将元素浮动到左/右

float: left;

不要忘记在

之后清除花车

clear: left;

Answer 3

使用

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

这样，图像将以文本

为中心对齐

请参阅此处： jsfiddle

Answer 4

请尝试添加以下css

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

Answer 5

您可以使用display: inline-block将文字和图片同时显示在一行中。

.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>

Answer 6

我访问了您在帖子中链接的网站，以下代码有效：

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

Answer 7

根据您的要求设置位置（浮动）

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

Answer 8

如果您需要支持旧版浏览器，最好的方法就是这样，即使在较小的屏幕尺寸上，white-space: nowrap;也会将它们保持在1行

.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>

你可以放弃内部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>

即使img也可以删除

.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>

Answer 9

您可以使用display:inline-flex

＆＃13;

＆＃13;

.cc51
 {
     display:inline-flex;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;