溢出其容器

Question

，當我重新在我下面的代碼片段問題保持甚至爲中心元素：如果你讓整版並拖動到當超過減小窗口h1元素不會保持居中的水平尺寸它的容器邊界。

這裏是一個可視化：

通知後超過其容器界定它只是保持靠左對齊。 我希望它保持中心。有沒有簡單的CSS修復？

@import url('https://necolas.github.io/normalize.css/latest/normalize.css'); 
 
* { 
 
    outline: 1px solid red; 
 
} 
 
html, body { 
 
    overflow: hidden; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 
h1 { 
 
    margin: 0; 
 
    color: #f3f3f3; 
 
} 
 
.v-cntr { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
.hdg-wrap { 
 
    font-size: 5.5rem; 
 
    position: absolute; 
 
    top: 48%; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    transform: translateY(-100%); 
 
    z-index: -1; 
 
}

<header class="v-cntr">    <!-- << v-cntr = vertically center --> 
 

 
    <!-- ----------------------- HEADING WRAPPER ------------------------ --> 
 
    <div class="hdg-wrap"> 
 
    <h1>RIDE</h1> 
 
    </div> 
 

 
    <!-- ------------------------ IMAGE WRAPPER ------------------------- --> 
 
    <div class="img-wrap"> 
 
    <img src="http://svgshare.com/i/xL.svg" alt="Logo"> 
 
    </div> 
 
</header>

我試圖不改變HTML的結構

---

編輯：我得到的答案試圖居中圖像，而不是它背後的文字。我可以看到混亂，因爲都偏離中心。我會重申：我主要關注的是保持h1（'騎'文本）元素居中在窗口中，因爲它縮小。

Answer 1

您可以重置.img-wrap的文本對齊方式，並使用此CSS將圖像置於其中。

.img-wrap { 
    text-align: initial; 
    position: relative; 
} 
.img-wrap img { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

添加評論後：您可以將相同的原子應用於h1。由於其父已經絕對定位，我並沒有改變這一點，只是增加

h1 { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

下面是完整的片段：

@import url('https://necolas.github.io/normalize.css/latest/normalize.css'); 
 
* { 
 
    outline: 1px solid red; 
 
} 
 

 
html, 
 
body { 
 
    overflow: hidden; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #eee; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
.v-cntr { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.hdg-wrap { 
 
    color: #fff; 
 
    opacity: 0.5; 
 
    font-size: 5.5rem; 
 
    position: absolute; 
 
    top: 48%; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    transform: translateY(-100%); 
 
    z-index: -1; 
 
} 
 

 
.img-wrap { 
 
    text-align: initial; 
 
    position: relative; 
 
} 
 

 
.img-wrap img { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<header class="v-cntr"> 
 
    <!-- << v-cntr = vertically center --> 
 

 
    <!-- -- - - - - - - - - - - - - - HEADING - - - - - - - - - - - - - - --> 
 
    <div class="hdg-wrap"> 
 
    <!-- << hdg-wrap = heading wrapper --> 
 
    <h1>RIDE</h1> 
 
    </div> 
 

 
    <!-- -- - - - - - - - - - - - IMAGE WRAPPER - - - - - - - - - - - - - --> 
 
    <div class="img-wrap"> 
 
    <img src="http://svgshare.com/i/xL.svg" alt="Logo"> 
 
    </div> 
 
</header>