通过CSS在img顶部的水平和垂直线

Question

我试图通过CSS在图像的顶部放置两行（水平和垂直）。

这是我的代码：

    div {
       width: 640px;
       position: relative;
    }
    .verticalLine {
       display: block;
       position: absolute;
       background-color: blue;
       width: 3px;
       top: 0px;
       bottom: 0px;
       left: 50%;
       height: 480px;
    }

    .horizontalLine {
       position: absolute;
       width: 3px;
       top: 0px;
       bottom: 0;
       left: 50%;
       background-color: blue;
       transform: rotate(90deg);
    }

    <div>
       <span class="verticalLine"></span>
       <span class="horizontalLine"></span>
       <img src="http://placehold.it/640x480">
    </div>

不幸的是，我的结果是：

我该如何解决？

谢谢

Answer 1

您应在horizontal线上增加一个等于图像宽度的高度，然后将其放置在top:50% translateY(-50%)的中心。

另外，您还应在两个图像上都添加translateX(-50%)，以使其停留在图像的确切中心。

见下文

div {
   width: 640px;
   position: relative;
}
.verticalLine {
   display: block;
   position: absolute;
   background-color: blue;
   width: 3px;
   top: 0px;
   bottom: 0px;
   left: 50%;
   height: 480px;
   transform: translateX(-50%)
}

.horizontalLine {
   position: absolute;
   width: 3px;
   top: 50%;
   bottom: 0;
   left: 50%;
   background-color: blue;
   transform: translate(-50%, -50%) rotate(90deg);
   height:640px;
}

<div>
   <span class="verticalLine"></span>
   <span class="horizontalLine"></span>
   <img src="http://placehold.it/640x480">
</div>