Question 44125 in Html Question posted in
Some basic documentation can be found here.

How do I get text to line up with a transformed image? – Html

I’m working on a nav bar, and want to have an image before the linked text, but when I rotate and translate the image to look the way I want it, it covers the text. Is there a way to make it be in that location and that rotation and be in line with the text, am I doing too much or doing something wrong? Output image added.

Code:

<tr>
    <td>
        <img src="massets/pencil.gif" id="pencil";><a href="about.html">about me</a>
    </td>
</tr>

CSS:

#pencil{
    transform: translate(10px, 10px) rotate(90deg);
}

output screenshot

Tags:

3

Answers


  1. 0

    I made some changes to the CSS you provided.
    I added margin-left and some styling.
    The problem was happening because there wasn’t enough space between the image and the link.

    <tr>
    <td>
     
        <img src="massets/pencil.gif" id="pencil";><a href="about.html">about me</a>
     
    </td>
</tr>

<style>
  
a{
  color: white;
  text-decoration: none;
  background-color: hotpink;
  padding: 5px;
  margin-left: 15px;
  font: 16px helvetica bold;
}
#pencil{
  background-color: lightseagreen;
    transform: translate(10px, 10px) rotate(90deg);
}
img {
  width: 28px;
  height: 30px;
}
</style>
    Login or Signup to reply.
  2. 0

    The problem is your use of transform rotate. I’m assuming your height of your icon is larger than the icons width?

    This is what causes the text to not adjust accordingly because the transform property will not change the "physical" space of the image and it’s placement. This is whats causing the overlapping.

    To solve this you could try to wrap the image in a div and set the width of the div to the same width as ur icons height.

    In the example I used a div with fixed size in px to simulate ur icon (img element)

    .icon-wrap {
    display: inline-block;
}

#pencil{
  /* 
  Simulating an image
  No need to care about this
  ---------------------- */
  display: inline-block;
  background-color: black;
  width: 8px;
  height: 24px;
  /* ------------------- */
  
  
  transform: translate(10px, 10px) rotate(90deg);
}
    <td>
  <div style="width: 24px;" class="icon-wrap">
    <div id="pencil"></div>
  </div>
  <a href="about.html">about me</a>
</td>
    Login or Signup to reply.
  3. 0

    Details are commented in example below.

    /* 
All "outline"s are for demo purposes.
*/


/*
When "font-size" (4ch) is assigned to <html> tag (:root), it will equal 1rem 
as a global default.
Adjusting "line-height" (1.45) vertically aligns the font between the top and 
bottom borders of it's parent tag (<a>). It will very from @1.15 to @1.65 
depending on "font-family" (Segoe UI), "font-size", etc.
*/

:root {
  font: 4ch/1.45 "Segoe UI";
}


/*
Make <nav> a flexbox.
"align-items: center" will center <img> and <a> vertically.
*/

nav {
  display: flex;
  align-items: center;
  outline: 3px blue dotted;
}


/*
By default <img> and <a> tags are "display: inline". In order to behave 
properly as a flex item, and have "transform" work, "display" 
must be set to any valid value BUT "inline".
*/

img,
a {
  display: block;
  height: 1.5rem;
  margin: 0 0.5rem 0 0;
  outline: 3px red dotted;
}


/*
If your image is centered within a square, then minute 
adjustments with "transform: translate" or "transform-origin"＊ 
isn't neccessary.
＊"transform-origin" is the best option, but it is unintuitive 
and difficult to implement IMO.
*/

.horizontal {
  transform: rotate(-90deg);
}
    <!--
For demo purposes.
-->
<figure>
  <img src="https://i.ibb.co/BTS3Rb1/pencil2.png">
  <figcaption>Image in original position</figcaption>
</figure>

<!--
The solution.
Ideally, the actual image file should be a square and the image should be
centered. 
Moreover, as Kiiado already commented, it would be more prudent to just edit 
the image file. If you are using a Windows PC, try
https://www.getpaint.net/download.html.
-->
<nav>
  <img class="horizontal" src="https://i.ibb.co/BTS3Rb1/pencil2.png">
  <a href="https://stackoverflow.com/users/21385907/bug">
    About Me
  </a>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search