How can I avoid hard coding line height while vertically centering element in a div?

Question

I have a checkbox next to 3 lines of text. I wish to center the checkbox vertically against these lines of text:

   A
[] B
   C

I'm attempting to do this via div containers while resisting the immense temptation to revert to tables. Here's my code so far:

<div style="overflow:auto;">
   <div style="height:57px; float:left;margin-right:15px;">
      <input style="vertical-align:middle;height:100%" type="checkbox" 
             name="theCheckbox" id="checkboxId">
   </div>
   <div style="float:left;">
       A<br/>
       B<br/>
       C
   </div>
</div>

JSFiddle

While the above 'works', I'm not happy about the hard coded height. Changing 57px to 100% makes the checkbox disappear (computed height becomes 0). Removing the height style from the div alltogether also results in a disappearing checkbox. Can anyone suggest improvments or alternative solutions to achieve my goal?

EDIT: I have to support IE7+ amongst other browsers.

geekchic · Answer 1 · 2013-08-14T10:24:08.880

2

How about this?

HTML:

<input type="checkbox" name="theCheckbox" id="checkboxId"/>

<div id ="try">
   A<br/>
   B<br/>
   C
</div>

CSS:

#checkboxId{
position:relative;
vertical-align:middle; 
}

#try{  
position:relative;
display:inline-block;    
vertical-align:middle; 
}

Here is the JSFiddle

edited Aug 14 '13 at 10:24

answered Aug 14 '13 at 10:10

geekchic

2,371
4
29
41

Thanks nikhita, but unfortunately this doesn't work on IE7. It also positions the checkbox to the right and I need it on the left. – Chris Knight Aug 14 '13 at 10:21
@ChrisKnight Well the left part of it is easily fixed and I've edited that. About IE7 though, I'll have a look at that. – geekchic Aug 14 '13 at 10:22

CaribouCode · Answer 2 · 2013-08-14T10:20:31.420

2

You could treat the elements as a table (without actually using a table) like this:

HTML

<div id="container">
   <div class="tableCell">
     <input type="checkbox" name="theCheckbox" id="checkboxId">
   </div>
  <div class="tableCell">A<br/>B<br/>C</div>
</div>

CSS

#container { display: table; }

.tableCell { 
    display: table-cell;
    vertical-align: middle; }

See the fiddle here: http://jsfiddle.net/QpnkV/2/

For backwards compatibility think about using scripts in your dochead like this:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->

<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

edited Aug 14 '13 at 10:20

answered Aug 14 '13 at 10:10

CaribouCode

13,998
28
102
174

Thanks Coop. Probabaly should have mentioned that I need this to work on IE7+ and the above does not. – Chris Knight Aug 14 '13 at 10:17
Yeh support for treating elements as tables and table cells is sketchy. There are scripts you can include in your doc head that fix CSS things like this to be backwards compatible though. – CaribouCode Aug 14 '13 at 10:19

score 1 · Answer 3 · edited May 23 '17 at 10:31

You can position the checkbox vertically using absolute positioning.

For your HTML, you can simplify it as follows:

<div class="wrap">
    <input class="control" type="checkbox" name="theCheckbox" id="checkboxId">
    <div class="label">A
        <br/>B
        <br/>C
        <br/>D</div>
</div>

and apply the following CSS:

.wrap {
    border: 1px dotted gray;
    position: relative;
    overflow: auto; /* triggers hasLayout in IE7 */
}
.control {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.label {
    margin-left: 20px;
}

Demo Fiddle: http://jsfiddle.net/audetwebdesign/N23qr/

The tradeoff here is that you need to hard code a value for margin-left on the .label container, which is less restrictive than specifying a height value.

Note About IE7

To get position: relative to work correctly for .wrap, you need to make sure that IE7 invokes the hasLayout property, which can be effected by applying overflow: auto. For more details, see: IE7 relative/absolute positioning bug with dynamically modified page content and specifically, http://www.satzansatz.de/cssd/onhavinglayout.html#rp

Thanks Marc, unfortunately, as per the other answers, it doesn't quite work with IE7 (the checkbox is positioned at the top rather than vertically centered). — Chris Knight, Aug 14 '13 at 11:57
Hi Chris, I don't have IE7 handy, but try: (1) setting a height and width to `.control` and if that fails, try (2) on `.control`, set `top: 50%` and then `margin-top: -5px` to adjust the offset, a bit crude but for IE7 you may have no choice. — Marc Audet, Aug 14 '13 at 12:03
Chris: see http://stackoverflow.com/questions/2473171/ie7-relative-absolute-positioning-bug-with-dynamically-modified-page-content and try adding `overflow: auto` to `.wrap` — Marc Audet, Aug 14 '13 at 12:08

How can I avoid hard coding line height while vertically centering element in a div?

3 Answers3