在两个文本对象上使用位置

Question

我们要求显示在主图像（标题1）上的正文必须显示在右侧相关缩略图的相同位置。

例如，我们在“标题1”上使用的样式是：

position: absolute;
left: 25%;
width: 100%;
z-index: 999;
letter-spacing: -2px;
font-weight: 900;
-webkit-text-stroke: 1px rgb(0, 0, 0);

这在主图像中正确显示，但在相关的缩略图中没有正确显示（它使用完全相同的样式），而文本显示在图像的右侧。像这样：

标题1可能在顶部居中，而标题2可能在垂直中心居中旋转。只需在缩略图中匹配主要文字

这不适用于缩略图，但在主图像上显示了我们想要的位置。

是否有比使用位置更好的方法：绝对位置，左侧位置和顶部位置？

HTML是

    <div id="shopmain1" style="background-image: url(https://dummyimage.com/600x400/000/fff.jpg&text=+); position: relative; width:100%; height:100%; background-size: contain; background-repeat: no-repeat; background-position: 0px 0px;">		      
    	<div id="shop_textlayer1" style="position: absolute; left: 25%; margin-top:0; transform: rotate(0deg); width: 100%;color: #000000;"><span class="shop_textlayer1_span">Title 1</span></div>		
    </div>

    <div class="shop_thumb item" id="thumb1" onclick="shopsetmainimage(1)" style="background-image: url(https://dummyimage.com/200x100/000/fff.jpg&text=+);">
        <div class="textOverlay thumb" id="shop_textlayer1" style="position: absolute; left: 25%; margin-top:0; transform: rotate(0deg); width: 100%;color: #000000;"><span class="shop_textlayer1_span">Title 1</span>
        </div>
    </div>

    <div class="shop_thumb item" id="thumb2" onclick="shopsetmainimage(2)" style="background-image: url(https://dummyimage.com/200x100/000/fff.jpg&text=+);">
        <div class="textOverlay thumb" id="shop_textlayer2" style="position: absolute; left: 10%; margin-top:15%; transform: rotate(45deg); width: 100%;color: #000000;"><span class="shop_textlayer1_span">Title 2</span>
        </div>
    </div>

    <div class="shop_thumb item" id="thumb3" onclick="shopsetmainimage(3)" style="background-image: url(https://dummyimage.com/200x100/000/fff.jpg&text=+);">
        <div class="textOverlay thumb" id="shop_textlayer3" style="position: absolute; left: 25%; margin-top:80%; transform: rotate(0deg); width: 100%;color: #000000;"><span class="shop_textlayer1_span">Title 3</span>
        </div>
    </div>

    <div class="shop_thumb item" id="thumb4" onclick="shopsetmainimage(4)" style="background-image: url(https://dummyimage.com/200x100/000/fff.jpg&text=+);">
        <div class="textOverlay thumb" id="shop_textlayer4" style="position: absolute; left: 105%; margin-top:15%; transform: rotate(90deg); width: 100%;color: #000000;"><span class="shop_textlayer1_span">Title 4</span>
        </div>
    </div>

Answer 1

将TITLE1置于顶部居中位置。尝试使用以下CSS属性：

.top-center{
    position: absolute;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    letter-spacing: -2px;
    font-weight: 900;
}

并通过旋转将其定位在中心/中心，请使用：

.center-center{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,50%) rotate(90deg);
    z-index: 999;
    letter-spacing: -2px;
    font-weight: 900;
}