homepage Welcome to WebmasterWorld Guest from 107.20.30.170
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
vertical alignment
whatson




msg:4493462
 8:45 pm on Sep 10, 2012 (gmt 0)

How do I align something in the middle, or bottom of an element?

 

birdbrain




msg:4493479
 9:12 pm on Sep 10, 2012 (gmt 0)

Hi there whatson,

here is a basic example...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>centered element without height</title>

<style type="text/css">
html,body {
display:table;
width:100%;
height:100%;
margin:0;
}
body {
display:table-cell;
vertical-align:middle;
background-color:#f0f0f0;
}
#centered {
width:760px;
padding:20px;
border:1px solid #999;
border-radius:10px;
margin:auto;
background-color:#fff;
box-shadow:10px 10px 20px #666;
}
</style>

</head>
<body>

<div id="centered">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus
ac quam pellentesque lacinia quis sit amet augue. Fusce eu
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu
et mauris scelerisque tristique. Donec fringilla mauris dolor,
sit amet vulputate lacus. Nulla feugiat mattis nulla non
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis
nisi eget neque tempus facilisis eu quis sapien.
</p>
</div>

</body>
</html>


birdbrain

lucy24




msg:4493495
 9:34 pm on Sep 10, 2012 (gmt 0)

Overlapping birdbrain, who clearly types much faster than I do.

My gosh. This question came up only a few weeks ago. I remember it well, because I initially came up with a completely wrong answer.

{display: table-cell}

turns out to be the magic phrase.

birdbrain




msg:4493508
 9:51 pm on Sep 10, 2012 (gmt 0)

Hi there Lucy,

....birdbrain, who clearly types much faster than I do...


Not really, the only typing that I did was...


Hi there whatson,

here is a basic example...

birdbrain


...with just two pinkies, one from each hand. ;)

Everything else that you can see was achieved with the amazing "C&P" facility. :)

birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved