CSS：在y轴上集中元素的标准（动态）方式 [英] CSS: Standard (dynamic) way to centralize an element in the y-axis

问题描述

我的问题或多或少是不言自明的，我试图找到一个标准的动态方式来集中一个元素在y轴，很像：

my question is more or less self-explanatory, I am trying to find a standard dynamic way to centralize an element in the y-axis, much like the:

margin: auto;

对于x轴。任何想法？

我说的是下面这段代码，空白页，在中心对齐一张图片。

I am talking about the following piece of code, empty page, align one image in the center.

<div id="main" style="display: block;"> 
    <img style="margin: auto; display: block;" 
    src="http://www.example.com/img.jpg" />
</div>

任何帮助将不胜感激！ :)

Any help will be appreciated! :)

推荐答案

只要放弃并使用这个表， vertical-align：middle 。你可以逃离只有一行，单细胞表，没有感觉太内疚（我睡得像一个婴儿）。它不是世界上最语义的东西，但你宁愿保持什么，一个小单元格的桌子，或者弄清楚确切的高度，做负绝对定位？

Just give up and use tables on this one, with vertical-align: middle. You can get away with just a single-row, single-cell table without feeling too guilty (I sleep like a baby about it). It's not the most semantic thing in the world, but what would you rather maintain, a tiny one celled table, or figuring out the exact height and doing absolute positioning with negative margins?

这篇关于CSS：在y轴上集中元素的标准（动态）方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！