Mark Mark - 5 months ago 14
CSS Question

how do i place a text upperright side of the image?

I am trying to make something like this using only CSS.
enter image description here

This is how it came out.

enter image description here

and this is my code.

<div class="info_1"><img src="images/xe_icon_2.png"><span>Powered by XE</span></div>


Now, I did give some css styling.

.info_1 {
display: inline;
clear:right;
}

.info_1 span{
font-size: 20px;
line-height: 100px;
}


what do i have to make a text appear on the upper right side of the image?

Answer

How about putting it before the image:

<div class="info_1">
    <span>Powered by XE</span>
    <img src="images/xe_icon_2.png">
</div>

and modifying the CSS a bit (you won't need that line height).

Or, you can keep the current markup, and make that span absolutely positioned and then fine-tune its position using top and right CSS rules.


Here's an example:

#ctn {
  width: 300px;
  background: #eee;
  position: relative;
  box-shadow: 0px 0px 12px #aaa;
}
.info_1 {
  display: inline;
  clear: right;
}
.info_1 span {
  font-size: 20px;
  position: absolute;
  top: 16px;
  right: 10px;
}
.info_1 img {
  margin: 20px 4px;
}
<div id="ctn">
  <div class="info_1">
    <span>Powered by XE</span>
    <img src="https://placehold.it/150x150">
  </div>
</div>


UPDATE

#main {
  width: 600px;
  background: #eee;
}
#ctn {
  width: 300px;
  margin: auto;
  position: relative;
  background: #999;
}
.info_1 span {
  font-size: 20px;
  position: absolute;
  top: 16px;
  right: 10px;
}
.info_1 img {
  margin: 20px 4px;
}
<div id="main">
  <div id="ctn">
    <div class="info_1">
      <span>Powered by XE</span>
      <img src="https://placehold.it/150x150">
    </div>
  </div>
</div>