2

I am trying to center text over an SVG element inside a DIV. I have put together a simple model of my target in this JsFiddle Example, Here.

CSS:

body {
  background-color: #efefef;
  font-family: sans-serif;
  text-align: left;
  padding: 20px 0 0 20px;
}

.mainScr {
  max-width: 1500px;
  margin: 1px;

}

.mainInfo {
  background-color: #D4FCD5;
  min-width: 495px;
  max-width: 1470px; 
  min-height: 100px;
  border: 1px double green;
}

.screenParts {
  vertical-align: top;
  width: 49%;
  max-width: 730px;
  min-width: 495px;
  min-height: 450px;
  border: 1px solid white;
  background: #F7E7C4;
  margin: 1px;
  display: inline-block;
}

.displayText {
  text-align: center;
  font-size: 0.8em;
  line-height: 0.75em;
  margin: 0.5em;
}    

.graphicsPanel {
  width: 100%;
  height: 66%;
  border: 1px solid blue;
  background: lightblue;
  display: table;
  text-align: center;
}

.displayValues {
  /*this combination works better along x, but not good along y*/
  position:relative;
  top: 50%;
  left: 50%;                 
  transform: translateX(-50%) translateY(+50%);
  /*transform: translateX(-50%) translateY(+600%);*/



  /* this combination keeps target in the middle of the screen!
  position:absolute;
  transform: translateX(-50%) translateY(-50%);              
  top: 50%;
  left: 50%;*/   
}

HTML: 

    </div>
    <div class="mainScr">
      <div id="visual" class="screenParts">
        <div class="graphicsPanel">
          <div class="displayValues">
        <p id="titleLabel" class="displayText">ParamName</p>
        <p id="valuLabel" class="displayText">Value</p>
        <p id="timerLabel" class="displayText">Description</p>
          </div>
<!--SVG Circle goes here, I removed it to prevent screen cluttering here, but it is included in the original JsFiddle Link-->
        </div>
      </div>
    </div>
</body>

The goal is to centralize all three lines of text (vertically and horizontally) in the middle of that circle. (In the main work, the circle is a more complex HMI that displays some information like a clock or a compass with hands and a JS code controls it.) I also need my parent div (graphicsPanel) to only occupy half-ish of the screen as specified in the css code.

So far I have tried all options in the answers to this question.

Some of the reasons that they don't quite work is:

  • I have more than one line of text to display
  • The height of the text lines are not fixed (in the real work, each text line has its own specific height)
  • the height/size of the parent div (graphicsPanel) is not fixed.
  • I'd like the text to be floating on the center of the circle, not before it or above it or, ....

I really like a html/css solution. My plan B and C options will be:

  • Plan B: Write a JS code that moves the text dynamically on screen size changed event.
  • Plan C: Write the text in the SVG and have the same JS that moves the clock hands, update the text.

HOWEVER, My goal is to have he least amount of SVG (and JS workarounds) and replace them with clean/nice html and css if possible at all.

Thanks everyone in advance.

Final Answer: (So Far, other suggestions are still welcome!)

As Rob Barber and Roberto S. suggested (and my self after a couple of try and errors), adding the position: relative to the parent div (graphicsPanel) and making the text div (.displayValues), positioned absolutely (with respect to its parent) will get me the desired results.

.graphicsPanel {
  position: relative;
  width: 100%;
  height: 66%;
  border: 1px solid blue;
  background: lightblue;
}

.displayValues {
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translateX(-50%) translateY(-50%);              
}
Community
  • 1
  • 1
AleX_
  • 508
  • 1
  • 6
  • 20
  • Actually I came across this question and answer and they seem to be working fine, I will look into them this afternoon, Please dont down vote form now. http://stackoverflow.com/questions/13994549/trouble-vertically-centering-text-in-another-div-with-relative-sizing/16195362#16195362 – AleX_ Jun 07 '16 at 16:51
  • Even in above example, when I added the SVG circle, the text-align:center attribute of ".tx" paragraph stops working. – AleX_ Jun 07 '16 at 16:57

1 Answers1

2

The position on .displayValues will position against the first ancestor node that has a non-static position. If none are defined, it will go up to the window and position against the viewport instead of the SVG you're trying to center over. Adding a position: relative to .graphicsPanel, will position .displayValues against it instead of the window.

Rob Barber
  • 121
  • 2