-1

Aim: to have a centred div with fluid width that has a semi translucent background with solid text and remains centred on smaller screens after text wrapping.

Issue: When the screen becomes small enough for the text to wrap the solid text shifts right instead of remaining centred.

Info: I have managed to combine two answers to try and get the desired outcome (took half a day to find two compatible answers and merge them, the woes of being a beginner):

opacity of background only not text

responsive div centred with fluid width

<div id="divboxtable">
  <div id="divboxcell">
    <div id="divbox">
      <div class="divtxtbck">
        <h1>WHAT AM I DOING WITH MY LIFE!</h1>
      </div>
      <div class="divtxtfor">
        <h1>WHAT AM I DOING WITH MY LIFE!</h1>
      </div>
    </div>
  </div>
</div>


#divboxtable {
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;
}

#divboxcell {
  display: table-cell;
}

#divbox {
  display: inline-block;
  zoom: 1;
  position: relative;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.divtxtbck {
  background-color: #fffffa;
  padding: 0 10px 0 10px;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  filter: alpha(opacity=50);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.50;
  opacity: 0.5;
}

.divtxtbck h1 {
//  visibility: hidden;
  color: red;
}

.divtxtfor {
  position: absolute;
  top: 0;
  left: 10px;
}

I have commented out the hidden nature of the background text so you can see how the alignment differs. The issue seems to be because of the absolute positioning - but how do you overcome this left align issue when the text wraps?

Fiddle You MUST make the output window narrow until the text wraps - then you will see the solid text is not centred the same as the transparent text.

TheOneTrueVlad
  • 11
  • 2
  • it is centered already – Dalin Huang Jul 08 '17 at 19:29
  • Oh, whoops, not used fiddle before. Needed to set the latest revision as the base. Now you can see the issue with the Fiddle. I have updated it to have an image background so you can see the opacity. When the text wraps you can see the alignment of the solid text is no longer centred, much easier to see when the transparent text is still visible - toggle this on line 33 of the CSS. – TheOneTrueVlad Jul 10 '17 at 07:40

1 Answers1

0

try to use media queries for responsive behaviour expected, and Also take a look on that position:absolute; Also display:block; for The id= divboxtable. Also why are you id instead classes?. Hope that helps you.

rushmata
  • 1
  • 1
  • Solution is copied from someone else - no idea why they use id not class? I am ditching this solution and using RGBA for the background, solves all the troubles with alignment. Cheers – TheOneTrueVlad Jul 23 '17 at 09:28