2016-12-05 138 views
0

我正在尝试实现以下内容;旋转文本不是问题,但它下面的行是。它应该根据文本的长度而改变。意思是文本长度变化时线条会相应缩小或扩大。文本的顶部应保持在同一位置。垂直文本旁边的垂直线

任何想法?

Example Image

编辑:

是我到目前为止已经试过(忽略柔性):

<section class="slideshow"> 

    <div class="forsale"> 
     <a href="#">te koop</a> 
     <span></span> 
    </div> 

    <img src="./img/project_1.jpg" alt=""> 

</section> 


.forsale { 

position: relative; 
a { 
    position: absolute; 
    transform: rotate(-90deg) translate(0 ,100%; 
    transform-origin:0% 0%; 
    background-color: #eee; 
    display: block; 
    text-decoration: none; 
    color: black; 
    width: 385px; 
} 
span { 
    display: block; 
    width: 1px; 
    height: 100%; 
    background-color: black; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
} 

} 

我在哪里现在 enter image description here

+0

一些标记和例子你试过什么,什么你想获得帮助。 – BenM

+0

请检查此链接:-http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css –

+0

@ Gerrit0我已经编辑了帖子。 –

回答

4

这是怎么回事 - 我已经添加了注释告诉你发生了什么

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slideshow { 
 
    position: relative; 
 
} 
 
.forsale { 
 
    width: 500px; /*this width = height of image */ 
 
    position: absolute; /* the following styles move this div to the middle of the slideshow div*/ 
 
    left: 50px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    z-index: 1; 
 
} 
 
img { 
 
    margin-left: 100px; /* this is just making space for the text */ 
 
    display: block; /* removes any space below the image */ 
 
} 
 
.forsale a { 
 
    /* this rotates the anchor so it is dow the side of the image and moves it to the left of the forsale div */ 
 
    transform-origin: center; 
 
    transform: translate(-50%, 0) rotate(270deg); 
 
    display: block; 
 
    width: 100%; 
 
    width text-decoration: none; 
 
    color: black; 
 
} 
 
.half { 
 
    display:block; 
 
    width: 50%; 
 
    position: relative; 
 
    text-align: right; 
 
} 
 
.half:after { 
 
    /* this is the black line */ 
 
    content: ''; 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    border-top: 1px solid #000000; 
 
    z-index: 1; 
 
} 
 
.line-hide { 
 
    /* this is to cover the black line under the text*/ 
 
    position: relative; 
 
    display: inline-block; 
 
    padding-left: 10px; /* however much space you want before the line */ 
 
    background-color: #ffffff; /* bacground colour of the page - hides the line */ 
 
    z-index: 2; 
 
}
<section class="slideshow"> 
 
    <div class="forsale"> 
 
    <a href="#"><span class="half"><span class="line-hide">te koop</span></span></a> 
 
    </div> 
 

 
    <img src="http://lorempixel.com/100/500/sports/1" alt=""> 
 
</section>

+0

Plussss从我:) – LGSon

+0

工程像魅力,但你会怎么去关于这个,如果你不知道图像的高度(即它与窗口的比例) –

+0

@JannesV不要以为你可以做到这一点,因为你需要知道的宽度知道你的文字可以多久是。唯一的其他选择是使用JavaScript来完成,以便您可以即时计算图像的高度 – Pete