Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

vertical-align : middle doesn't work with height : 100%

Posted on 2004-11-25
14
Medium Priority
?
849 Views
Last Modified: 2012-05-05
Hey folks,

What I'm trying to do is have a long thin button running vertically down the side of a form with its text vertically aligned in the middle.

Eg.

+-------+---------+
|          |  rest    |
|         +---------+
|          |    of    |
|  text  +---------+
|          |   form  |
|         +---------+
|          | stuff    |
+-------+---------+

So I wrote the example at the bottom.  If I run with the heights as 100%, the anchor doesn't fill the cell but it is aligned in the middle.  If specify the height in pixels, it does fill the cell but the text is at the top.  That's all by the by anyway cuz in the real app I can't use an absolute height.


So how do I get text vertically aligned in the middle when using 100% height?

Cheers,
.pd.

<html>
<style>
.vm_hideshow
{
      vertical-align : middle;
      background-color : lightsteelblue;
      color : black;
      width : 5px;
/*      height : 300px;  */
      height : 100%;
      font : arial;
      border-top : solid 3 azure;
      border-left : solid 3 azure;
      border-bottom : solid 3 steelblue;
      border-right : solid 3 steelblue;
}

.vm_hideshow:hover
{
      vertical-align : middle;
      background-color : lightsteelblue;
      color : black;
      width : 5px;
/*      height : 300px;  */
      height : 100%;
      font : arial;
      border-top : solid 3 steelblue;
      border-left : solid 3 steelblue;
      border-bottom : solid 3 azure;
      border-right : solid 3 azure;
}
</style>
<table border="2">
      <tr>
            <td valign="middle">
                  <a href="somewhere" class="vm_hideshow">click</a>
            </td>
            <td>
                  <table>
                        <tr>
                              <td>one</td>
                        </tr>
                        <tr>
                              <td>one</td>
                        </tr>
                        <tr>
                              <td>one</td>
                        </tr>
                        <tr>
                              <td>one</td>
                        </tr>
                        <tr>
                              <td>one</td>
                        </tr>
                  </table>
            </td>
      </tr>
</table>
</html>
0
Comment
Question by:datamobility
  • 6
  • 3
  • 2
  • +2
13 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 12674401
You could try adding display:table-cell to the class.

Regards

-r-
0
 

Author Comment

by:datamobility
ID: 12674564
Thanks for the sugesstion.  Unfortunately, it made no difference.

.pd.
0
 
LVL 11

Expert Comment

by:neester
ID: 12674586
easy
Your not ROWSPANNING it...
It should VALIGN middle anyway
Here - change to:

<table border="2">
     <tr>
          <td rowspan="5">
               <a href="somewhere" class="vm_hideshow">click</a>
          </td>
          <td>
               <table>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
               </table>
          </td>
     </tr>
</table>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:datamobility
ID: 12674675
Welcome to my hell.  :-)

Rowspan does't work either.  :-\

.pd.
0
 
LVL 2

Accepted Solution

by:
rcmwizbit earned 1125 total points
ID: 12675525

Is this in any way helpful?! Relies on small amount of javascript in addition to CSS - couldn't see how it was achievable otherwise, but it's nearly the end of the week so I could be missing something... ;)

You can see how it looks at http://ee.wizbit.net/css.php - any good?


<html>
<style>
.cellHideshow {
     vertical-align : middle;
     background-color : lightsteelblue;
     color : black;
     width : 5px;
     height : 100%;
     font : arial;
     border-top : solid 3 azure;
     border-left : solid 3 azure;
     border-bottom : solid 3 steelblue;
     border-right : solid 3 steelblue;
     cursor: hand;
}

.cellHideshowHover {
     vertical-align : middle;
     background-color : lightsteelblue;
     color : black;
     width : 5px;
     height : 100%;
     font : arial;
     border-top : solid 3 steelblue;
     border-left : solid 3 steelblue;
     border-bottom : solid 3 azure;
     border-right : solid 3 azure;
     cursor: hand;
}

.vmHideshow
{
     vertical-align : middle;
     background-color : lightsteelblue;
     color : black;
     width : 5px;
     font : arial;
     border: none;
}

.vmHideshow:hover
{
     vertical-align : middle;
     background-color : lightsteelblue;
     color : black;
     width : 5px;
     font : arial;
         border: none;
}

</style>
<table border="2">
     <tr>
          <td rowspan="5" id="buttonCell" class="cellHideshow" onClick="document.location='somewhere';" onMouseOver="this.className='cellHideshowHover';" onMouseOut="this.className='cellHideshow';">
               <a href="somewhere" class="vmHideshow">click</a>
          </td>
          <td>
               <table>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
               </table>
          </td>
     </tr>
</table>
</html>
0
 
LVL 11

Expert Comment

by:neester
ID: 12677480
This code SHOULD work, unless youhave some CSS screwing it up...



<table border="2">
     <tr>
          <td rowspan="5">
               <a href="somewhere" class="vm_hideshow">click</a>
          </td>
          <td>
               <table>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
                    <tr>
                         <td>one</td>
                    </tr>
               </table>
          </td>
     </tr>
</table>


Put that into a text file, open it in IE, or Moz...
Works fine :)

look here: http://img.neester.com/506.jpg
0
 
LVL 9

Expert Comment

by:lombardp
ID: 12679784
Just a very simple change: apply the style not to the anchor (its size is limited to the inner text), but to the <TD>

Before:

          <td rowspan="5">
               <a href="somewhere" class="vm_hideshow">click</a>
          </td>

After:

          <td class="vm_hideshow" rowspan="5" valign="middle">
               <a href="somewhere">click</a>
          </td>
0
 

Author Comment

by:datamobility
ID: 12680145

The clickable TD works fine so long as everything I need to do can be done in javascript.  But TD's don't have serverside click events so I would guess I would then need to start looking at Request.Form["__EVENTTARGET"] manually in Page_Load to simulate catching a click event?  Anyway - it's a lot of work when if I could just use a control that has a (server)Click event...

...and the problem with this anchor exists independently of tables too.  Try this:

<a height="200px" width="5px" style="background-color : orange; height : 200px; vertical-align : middle;" valign="middle" href="somewhere">&gt</a>

The ">" appears at the top and I want it in the middle.  Is it possible?  Is vertical-align broken or am I using it wrongly?

.pd.
0
 
LVL 9

Expert Comment

by:lombardp
ID: 12680188
valign="middle" should be placed in the <TD>, just like the CLASS attribute
0
 

Author Comment

by:datamobility
ID: 12680635
>        valign="middle" should be placed in the <TD>

That will only align the *anchor* to the middle of the *cell*.  I want to align the text *in* the anchor to the middle of the *anchor*.

Just stick that single anchor in a file and open it in IE.

Done?  Good - now how do I get the text in the middle?

.pd.
0
 

Author Comment

by:datamobility
ID: 12680737
If anyone can figure out how to vertically align text to the middle of a tall anchor, then cool.  In the meantime, I've found a solution that lets me use serverside click events.

Using rcmwizbit's clickable TD idea as a base, I then added an empty anchor to the page:

  <a id="hiddenAnchor" runat="server"/>

In the TD's onclick javascript:

  document.getElementById('hiddenAnchor').click();

Server-side:

protected HtmlAnchor hiddenAnchor;
Page_Load()
{
      hiddenAnchor.ServerClick += new EventHandler(hiddenAnchor_Click);
}

Thanks to everyone for your contributions.

Cheers,
.pd.
0
 
LVL 9

Assisted Solution

by:lombardp
lombardp earned 375 total points
ID: 12681420
If I understand your need, you want all the TD area to be sensible to click, just like a button.

So why don't you use a button?

          <td class="vm_hideshow" rowspan="5" valign="middle">
               <input style="height: 100%;" type="button" value="CLICK" onclick="click()" />
          </td>
0
 

Author Comment

by:datamobility
ID: 12682089
Honestly?  Because I was being lazy wanted to make use of the anchor's :hover sensitivity than set onmouseover/out attributes.  I've been habitually using this method for "button"s ever since I discovered ":hover" so I didn' think of it for that reason and also, I'm so new to this, I just felt it was more likely to be my ignorance rather than a bug (IMHO) in <a>.

I mean, come on:

<a style="vertical-align : middle; height=200px; background-color : orange">click me</a>

That *should* work, right?  It works for buttons and table cells, why not anchors?

Now, I've already given the points to wizbit but fair's fair.  Your solution is simpler and closer to the original problem than the clickable td, so I'll create another question with your name in the title and give you some points that way.

.pd.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month13 days, 18 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question