1

I Know there are several questions about this topic, however I think they depend a bit on another CSS properties given before.

I have a nested <div id="tituloParametros>" and I need its text/contain to be centred on vertical and horizontal position.

This is my markup:

<div id="outer">

        <div id="parametros">
        <div id="tituloParametros">Ingresa los puntos conocidos x,f(x)</div>
        </div>

        <div id="resultados">
            <div id="graficos">
                <div id="bars"></div>
                <div id="fx"></div>
                <div id="pinchetabla">Tabla inútil</div>
            </div>
            <div id="loquerealmenteimporta"></div>  
        </div>

</div>

And this is the applied CSS:

#outer{

  padding-left: 15px;
  padding-top: 15px;
  width: 1350px; 
  height: 640px;
}

#parametros {
  float:left;
  width: 20%;
  height: 100%;
}
      #tituloParametros {
        height: 9%;
        width: 100%;
        background-color: red;
        text-align:center;
        vertical-align:middle
      }

#resultados {
  float:right;
  width: 80%;
  height: 100%;
}

      #graficos {
        height: 75%;
        width: 100%;
      }

          #bars {
            float: left;
            height: 100%;
            width: 30%;
          }

          #fx {
            float: left;
            height: 100%;
            width: 30%;
          }          

          #pinchetabla {
            float: left;
            height: 100%;
            width: 40%;
          }

      #loquerealmenteimporta {
        height: 25%;
        width: 100%;
      }

I thought that:

text-align:center;
vertical-align:middle

both will make it but it didn't. Adding display: table-cell; doesn't solve it neither, it actually crops the background to the text limits.

This is how it looks like

3 Answers 3

2

You're right - the table/table-cell approach doesn't work here.

As an alternative, you could resort to the absolute positioning method. An element will be vertically centered when the top value is 50% subtracted by half the element's height. In this instance, it shouldn't be a problem because the height is already set with the % unit. 100% - 50% - 9%*.5 = 45.5% If this weren't the case, you could use calc() or negative margins to subtract the px unit from the % unit. In this case, it's worth noting that the child element is absolutely positioned relative to the parent element.

Updated CSS -- UPDATED EXAMPLE HERE

#parametros {
    float:left;
    width: 20%;
    height: 100%;
    outline : 1px solid black;
    position:relative;
}
#tituloParametros {
    background-color: red;
    width: 100%;
    height: 9%;
    text-align:center;
    position:absolute;
    top:45.5%
}

The element #tituloParametros is now centered within the parent element. If you want to center the text within it, you could wrap the text with a span element and then use the table/table-cell vertical centering approach:

UPDATED EXAMPLE HERE

#tituloParametros {
   /* other styling.. */
    display:table;
}
#tituloParametros > span {
    display:table-cell;
    vertical-align:middle;
}
4
  • Oh! Well, I only want the text centred within its down div, not such div centred at its outer :) Mar 15, 2014 at 20:21
  • @diegoaguilar I guess I misunderstood! You can just use that second part then. Here is an updated example It's better than the line-height solution because it will work with a dynamic height.. Mar 15, 2014 at 20:22
  • Thanks, you've been very helpful. Btw which software for linux (and not Dreamweaver or similars) would help at designing more complicated layouts would you recomend? Mar 15, 2014 at 20:27
  • 1
    @diegoaguilar I wouldn't really be able to answer that. I have done all my development with the default windows notepad and the Google Chrome developer tool. Sublime text is a nice editor if you want syntax highlighting.. it's good for PHP. Mar 15, 2014 at 20:29
1

Here is my fix for this!:::: HTML:

<div id="parametros">
<div id="tituloParametros"><p>Ingresa los puntos conocidos x,f(x)</p></div>
</div>

CSS:

  #tituloParametros {
            height: 70px;
            width: 100%;
            background-color: red;
            text-align:center;
            vertical-align:middle
          }
          #tituloParametros p{
            line-height: 70px;
          }
1
  • What if I always use percents for divs height and width Mar 15, 2014 at 20:17
0
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

Here is the demo http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.