css 如何使文本与变换后的图像对齐？

kxkpmulp 于 2023-03-14 发布在其他

关注(0)|答案(3)|浏览(135)

我正在制作一个导航栏，希望在链接文本之前有一个图像，但是当我旋转和平移图像以达到我想要的效果时，它覆盖了文本。有没有办法让它在那个位置和那个旋转，并与文本对齐，我做得太多了还是做错了什么？添加了输出图像。
代码：

<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

css

来源：https://stackoverflow.com/questions/75717149/how-do-i-get-text-to-line-up-with-a-transformed-image

3条答案

按热度按时间

dbf7pr2w1#

我对您提供的CSS做了一些更改。

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

赞(0）回复(0）举报 2023-03-14

2ekbmq322#

问题是你使用的变换旋转。我假设你的图标的高度大于图标的宽度？
这就是为什么文本不能相应地调整，因为transform属性不会改变图像的“物理”空间和它的位置，这就是为什么会出现重叠。
要解决这个问题，你可以尝试将图片 Package 在一个div中，并将div的宽度设置为与图标的高度相同。
在这个例子中我使用了一个固定大小的div来模拟ur图标（img元素）

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

赞(0）回复(0）举报 2023-03-14

xqnpmsa83#

详细信息在下面的示例中注解。

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

赞(0）回复(0）举报 2023-03-14

我来回答

css 如何使文本与变换后的图像对齐？

3条答案

相关问题

热门标签

最新问答