需要垂直文本从底部开始与横幅左侧对齐

Posted 2023-03-05

【中文标题】需要垂直文本从底部开始与横幅左侧对齐

【英文标题】：Need vertical text to align with left of banner starting from bottom

【发布时间】：2014-12-17 02:05:11

【问题描述】：

我想将一些文本与横幅图像垂直对齐。 我希望文本从横幅图像的左下方开始。 我正在使用 Drupal，所以我必须在横幅图像块旁边添加一个文本块。

我希望它看起来像这样：

但是如果看起来像这样：

这是提供横幅/文本的网站：

Banner & Text Web Page

这是我用来产生垂直文本的 css，它应该与横幅左侧对齐：

.vertical-text 
float: left;
transform: rotate(-90deg);
transform-origin: left bottom 0;

谁能帮我正确对齐文本？

谢谢，

大卫

【参考方案1】：

测试一下：

.vertical-text 
  float: left;
  transform: rotate(-90deg);
  transform-origin: left bottom 0;
  margin-right:-30px; //or change it until be that you want 
  margin-bottom:-100px; 

编辑

#header-image
  position:relative;
  width:700px;
  height:300px;
  // ...
 
.vertical-text 
   position:absolute;
   bottom:0;
   left:-20px;
   transform: rotate(-90deg);
   transform-origin: left bottom 0;



 <div id="header-image">
    <div class="vertical-text"></div>
 </div>

【参考方案2】：

您可以做的一件事是在 div content 之后为 p 标签创建类并在 css 下添加

我已经检查过了，看截图

<div class="content">
    <p class="zeroo"">
<a href="/abouttheartist">About the Artist</a></p>
  </div>

css

.zeroo
position: absolute;
bottom:0px;
left: -340px;