Vertical-Align: Middle for a Span inside a Div

@riz-manApr 20.2008

Hi,

Summary: I have two spans side by side, inside a div. The two spans have not had their heights specified – I have left this to be dictated by the items found within them (i.e. an image in one and text in the other). One span is shorter than the other.

Can someone please explain how I get the shorter span to vertically align in the middle instead of what you’ll see in the attached file (both spans are positioned at the top of the div that they are contained in)?

Here’s the CSS coding:

.level-content-holder { width: 700px; margin: 0px auto; padding: 25px; }

.level-content-holder-1 { }
.level-content-holder-1 p { margin:10px 0; }
.level-content-holder-1 span.content { float: left; width: 470px; border-style: solid; text-align: left; padding-top: 5px; }
.level-content-holder-1 span.photo { float: right; width: 230px; border-style: solid; text-align: left; padding-top: 0px; }

.level-content-holder-2 { clear: both; }
.level-content-holder-2 p { margin:10px 0; }
.level-content-holder-2 span.photo { float: left; width: 230px; border-style: solid; text-align: right; padding-top: 0px; }
.level-content-holder-2 span.content { float: right; width: 470px; border-style: solid; text-align: right; padding-top: 5px; }

Here’s the HTML:

<div class=”level-content-holder”>
<div class=”level-content-holder-1″>
<span class=”content”>
<p align=”left”>What is Lorem Ipsum?</p>
<p align=”left”>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry’s standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.</p>
</span><span class=”photo”><img src=”../homepage.jpg” width=”220″ height=”170″ align=”left”></span>
</div>
<div class=”level-content-holder-2″>
<span class=”photo”><img src=”../homepage.jpg” width=”220″ height=”170″ align=”left”></span><span class=”content”>
<p align=”left”>Why do we us it?</p>
<p align=”left”>It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using ‘Content here, content here’, making it
look like readable English. Many desktop publishing packages and web page
editors now use Lorem Ipsum as their default model text, and a search
for ‘lorem ipsum’ will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes
on purpose (injected humour and the like).</p>
</span>
</div>
<div>

I did try adding { vertical-align: middle; } to the .level-content-holder-1 { } and .level-content-holder-2 { } Div’s but that doesn’t work. What gives?

Thanks for any help provided.

~~[upl-file uuid=4660f202-4068-46d0-bd6b-9a91c160b24a size=72kB]~~problem_vertical-align.jpg[/upl-file]

to post a comment

CSS

10 Comments(s) _↴

@toenailsinApr 20.2008 — #vertical-align: center?

@ray326Apr 20.2008 — #vertical-align: center?[/QUOTE]
No. http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

@ray326Apr 20.2008 — #For starters, this

<span class="content">

<p align="left">What is Lorem Ipsum?</p>

is not valid HTML. Inline elements cannot contain block elements.

@riz-manauthorApr 20.2008 — #Okay...

So I amended the css and html...

CSS:

.level-content-holder-1 { border-style: solid; vertical-align: middle; }

.level-content-holder-1 p { margin:10px 0; }

.content1 { float: left; width: 450px; border-style: solid; text-align: left; padding-top: 5px; }

.photo1 { float: right; width: 230px; border-style: solid; text-align: left; padding-top: 0px; }

.spacer { clear: both; }

HTML:

<div class="level-content-holder-1" align="left"> 
 
   <div class="content1">
   <p>What is Lorem Ipsum?</p>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   Lorem Ipsum has been the industry's standard dummy text ever since the 
   1500s, when an unknown printer took a galley </p>
   <p>of type and scrambled it to make a type specimen book. It has survived 
   not only five centuries, but also the leap into electronic typesetting, 
   remaining essentially unchanged. It was popularised in the 1960s with 
   the release </p>
   <p>of Letraset sheets containing Lorem Ipsum passages, and more recently 
   with</p>
   <p> desktop publishing software like Aldus PageMaker including versions 
   of Lorem Ipsum.<br>
   </p>
   </div>
   <div class="photo1">
   <img src="../homepage.jpg" width="220" height="170" align="left"> 
   </div>
   <div class="spacer">&nbsp;</div>
  </div>

.content1 div is taller than .photo1 div (no height has been specified) - both div's are inside level-content-holder-1 div.

What I want is to have .photo1 div vertically positioned in the middle, next to content1 div.

I have set the vertical-align: middle; attribute to the parent div holder (i.e. level-content-holder-1).

What happens is that both div's are positioned right at the top of the parent div as shown in the image problem_vertical-align2.jpg.

[upl-file uuid=d13a6170-23dc-4e0c-8dd1-4618b8e76592 size=40kB]problem_vertical-align2.jpg[/upl-file]

@CentauriApr 20.2008 — #Vertical-align is only for inline and table elements - doesn't work on block elements. The table and table-cell display modes (gee, I wish they would rename those..) can be used, but as IE doesn't recognise that, other IE quirks can be put to use. How about

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Untitled Document</title>
 <style type="text/css">
 .level-content-holder-1 {
 display: table;
 vertical-align: middle;
 border: 2px solid black;
 float: left;
 padding: 5px;
 }
 .level-content-holder-1 p {
 margin:10px 0;
 }
 .content1 {
 float: left;
 width: 450px;
 text-align: left;
 border: 2px solid black;
 padding: 5px;
 margin-right: 5px;
 }
 .photo1 {
 display: table-cell;
 vertical-align: middle;
 }
 .photo1 img {
 padding: 5px;
 border: 2px solid black;
 }
 </style>
 <!--[if IE ]>
 <style type="text/css">
 .photo1 {float: left; position: relative; top:50%; height: 100%;}
 .photo1 img {position:relative; display: block; top: -50%;}
 </style>
 <![endif]-->
 </head>
 <body>
 <div class="level-content-holder-1" align="left">
 <div class="content1">
 <p>What is Lorem Ipsum?</p>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.	Lorem Ipsum has been the industry's standard dummy text ever since the	1500s, when an unknown printer took a galley </p>
 <p>of type and scrambled it to make a type specimen book. It has survived	not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release </p>
 <p>of Letraset sheets containing Lorem Ipsum passages, and more recently with</p>
 <p> desktop publishing software like Aldus PageMaker including versions	of Lorem Ipsum.</p>
 </div>
 <div class="photo1"> 
 <img src="../homepage.jpg" width="220" height="170">
 </div>
 </div>
 </body>
 </html>
 [/CODE]

@riz-manauthorApr 20.2008 — #Hi - thanks! It's done the trick in FF.

I can't get it to work in IE because I use a single file to house all my css (i.e. a .css file). How do I put this in the .css file?



Thanks.

@CentauriApr 20.2008 — #You can't put the conditional comments in the css file, but you could put those styles in a separate IE only css file and link it in the html following your normal css link via the conditional comment [CODE][/CODE]

@riz-manauthorApr 20.2008 — #Hi,

Sorry to be a pain but IE isn't recognising this style sheet.

Here's what I've done.

I have a style sheet called...

iestyle.css in my css folder, "css"

I have referenced it in the header of the htm page under the primary .css file as so...

<link rel="stylesheet" href="../css/styles.css" type="text/css">



iestyle.css only contains the two pieces of coding that you provided for IE browsers...

.photo1 {float: left; position: relative; top:50%; height: 100%;}

.photo1 img {position:relative; display: block; top: -50%;}

I get the what the attached images shows. ?

[upl-file uuid=8035737f-c5a6-4ced-8f65-d8407c5f7320 size=38kB]problem_vertical-align3.jpg[/upl-file]

@CentauriApr 20.2008 — #You have to take your folder structure into account just like your main css file. As your main file is linked as "../css/styles.css", then your ie css file should be referenced by the same path "[COLOR="Blue"]../css/iestyle.css[/COLOR]".

@riz-manauthorJun 15.2008 — #Hi,

I'm once again working on this exercise but this time, I need two div's containing text side by side rather then one text and one image like before.

With that in mind, how does the IE coding need to be amended as .photo1 img does not apply in this case?

This time, the div on the right needs to be placed at the bottom of the parent div rather then the middle of it.



Thanks in advance for any help on this.

Also in #CSS _↴

Span Hover Rounded borders Define table cellspacing and cellpadding?

Success!

Help @riz-man spread the word by sharing this article on Twitter...

Tweet This

Vertical-Align: Middle for a Span inside a Div

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Vertical-Align: Middle for a Span inside a Div

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴