开发者

HTML5 and vertical-align? Fixed now?

开发者 https://www.devze.com 2023-01-12 21:38 出处:网络
I come from theworld, and have been looking at resources on google about doing multiple wrappers to vertically align content -- however it seems like it\'s really ugly.

I come from the world, and have been looking at resources on google about doing multiple wrappers to vertically align content -- however it seems like it's really ugly.

Is there an easier way now with HTML5? Is there some sort of implementation that uses something like the HBox/VBox mentality? I saw there are examples for non-ie browsers -- is there a compliant way?

How the heck does anyone in their right mind do HTML now? It's a mess!

//// EDIT

I've finally figured out how to vertically align an entire box over a screen, how I'm figuring out how to vertically center list items.

I've tried two methods to align this html:

<nav>
   开发者_运维问答 <ul>
        <li><a href="#!/home">Home</a></li>
        <li><a href="#!/link1">Link #1</a></li>
    </ul>
</nav>

one using display:inline, the other using float:left (within a container). When using inline, it seems the list items ignore the height: css, and when using float:, the links within the li do not vertically align. Do I need to place div's within the li's to get them to vertically center as well?


Why don't you try using display: box with box-align:center, this is CSS3, so not every browser supports it yet (only Chrome, FireFox, and Safari)

http://www.w3schools.com/cssref/css3_pr_box-align.asp


You can make the line-height property equal to the height of the LIs with display:inline-block for the LIs. When you do this the text will be in the middle of the line, the line being the same height of the LI, the text will be vertically in the middle.


HTML5 really doesn't have anything to do with element layout, such as vertically aligning content. As before, the markup is styled by CSS.

CSS is a totally different spec from HTML5, so no, nothing has changed.


If you're having trouble implementing a specific layout, then ask a specific question, and we can probably help out.


you can set an outer element to display:table and an inner element to display:table-cell. then, on the table-cell element, set vertical-align:middle; all its contents will be vertically centered.

It won't work on IE7 and earlier though, but hey, who cares??

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号