CODEWITHSUNDEEP
htmlcssalignmentcentering
Lynel Hudson
Lynel Hudson

Reputation: 2405

Keep element centered even when overflowing its container

I recreated my problem in the snippet below: If you make it Full page and drag to decrease the horizontal size of the window the h1 element doesn't stay centered when it exceeds the bounds of it's container.

Here is a visual:

enter image description here

Notice after it exceeds its containers bounds it just remains left aligned. I would like it to stay centered. Is there a simple CSS fix?

@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>

I'm trying not to change the structure of the HTML

EDIT: I'm getting answers attempting to center the image instead of the text behind it. I can see the confusion as both get off center. I will reiterate: My main concern is to keep the h1 ( 'ride' text ) element centered in the window as it shrinks.

Upvotes: 4

Views: 1751

Answers (1)

Johannes
Johannes

Reputation: 67748

You can reset the text-alignment for .img-wrapand center the image inside it using this CSS.

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

ADDITION after comment: And you can apply the same priciple to the h1. Since its parent is already absolutely positioned, I didn't change this and just added

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

Here's the complete snippet:

@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>

Upvotes: 5

Related Questions