Vertical Alignment

前端未结

关注

 4  2000

隐瞒了意图╮

Please take a look at this: http://sources.freehosting.bg/landing.html

I am trying to vertically align #content so it looks good on larger (1920x1200) and smaller (1

相关标签:

4条回答

别那么骄傲

2021-01-15 04:38
See if this fiddle is what you are looking for. Simple solution IMO.

It works by forcing the containing div to behave as a table-cell, and making use of the vertical-align: middle style. It doesn't require you to know the heights of any elements at all.

Code used in the fiddle are below.

HTML:
```
<div class="a">
    text inside div a
    <div class="b">
        text inside div b
    </div>
</div>
```
The important styles are:
```
display: table-cell 
vertical-align: middle
```
The rest are only there for demonstration. CSS:
```
div.a {
    border: 1px solid red;
}
div.b {
    border: 1px solid blue;
    height: 200px;
    display:table-cell;
    vertical-align:middle;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

青春惊慌失措

2021-01-15 04:41

The only way I know of that works using pure CSS, no JS and no hacks requires you to know the height of the thing you're trying to position:

<html>
  <head>
    <style type="text/css">
      /* Give your document height */
      body, #content {
        height: 100%;
      }

      /* Give your element height */
      .thing {
        width: 20px;
        height: 300px;
        background: #000;
      }
      /* Position thing */
      #content .thing {
        position: absolute;
        top: 50%;
        margin-top: -150px; /* half the height of the thing */
      }
    </style>
  </head>
  <body>
    <div id="content">
       <div class="thing"></div>
    </div>
  </body>
</html>

EDIT: Updated height of item, container id. Still works just fine.

0 讨论(0)

情书的邮戳

2021-01-15 04:48

There is one way to do this without javascript and without knowing the height of the content - but purists will not like it. Then again, sometimes it doesn't matter if it's not approved by the trendy people. Sometimes all you need is to get the job done because you boss wants it that way.

And the solution is: use a table (told you purists wouldn't like it). Do layout the old school way and abuse the fact that HTML specifies lots of capabilities to tables.

A table cell is the only HTML element that has a vertical alignment attribute that does what most people expect it to do. Just give the table 100% width and height (so that is expands with the window size) and use cell alignment to position the content you want.

I've only ever had to use this trick once and it still makes me feel dirty* but when you really need it it works better than anything else.

*note: I'm a purist myself but understand that sometimes a man's got to do what a man's got to do.

0 讨论(0)
发布评论:

提交评论
- 加载中...

刺人心

2021-01-15 04:52

If your content height is fixed put a div before the content

<div id="distance"></div>
<div id="content">
  Vertically centered :D
</div>

and style it like:

html, body {
height:100%;
margin:0;
padding:0;
}

div#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* half of website height */
float:left;
}

div#content {
text-align:left;
margin:auto;
position: relative;
width: 950px;
height: 600px;
clear: left;
}

0 讨论(0)