中心垂直和水平块具有动态的宽度和高度 [英] Center block vertically and horizontally with dynamic width and height

问题描述

我需要垂直和水平居中的元件和该元件不能有任何固定尺寸。该元素的含量必须不影响...这意味着一些元素将文本对齐左，其他中心时，它们可能是图片，等等等等。

下面是我在哪里目前： http://jsfiddle.net/Shpigford/BUbmz/

蓝色块变化的宽度和高度动态的基于内容和中心水平，工作正常。

不过，我现在需要做的是中央的蓝色块垂直。

蓝色块不能有任何固定的尺寸，虽然红块的可以的。

下面是我的CSS：

 部分{
  宽度：500px的;
  高度：300像素;
  背景：红色;
}
可供选项{
  显示：表;
  保证金：0汽车;
  背景：蓝色;
}
H2 {
  文本对齐：中心;
  保证金：0;
  填充：0;
}
UL {
  保证金：0;
  填充：0;
  文本对齐：中心;
}
李{
  文本对齐：左;
}
 

和HTML：

 ＆lt;节＆GT;
  ＆LT; D​​IV CLASS =选项＆GT;
    ＆LT; H2＆gt;我的问题＆LT; / H＆GT;
    ＆LT; UL＆GT;
      ＆LT;李＆GT; Ligula华富＆LT; /李＆GT;
      ＆LT;李＆GT; Condimentum Nullam油树＆LT; /李＆GT;
      ＆LT;李＆GT; Aenean＆LT; /李＆GT;
      ＆LT;李＆GT; Commodo悲NIBH Ligula Vulputate＆LT; /李＆GT;
    ＆LT; / UL＆GT;
  ＆LT; / DIV＆GT;
＆LT; /节＆gt;
 

解决方案

下面是居中的DIV垂直，与回退的各种浏览器，包括老版本的IE浏览器的解决方案。

http://www.jakpsatweb.cz/css/css-垂直中心solution.html

翻译，你的小提琴变成这样：

http://jsfiddle.net/GolezTrol/BUbmz/1/

I need to center an element both vertically and horizontally and the element can't have any fixed dimensions. The contents of the element must not be affected...meaning some elements will be text-align left, others center, they may be images, etc etc.

Here's where I'm at currently: http://jsfiddle.net/Shpigford/BUbmz/

The width and height of the blue block changes dynamically based on the content and centers horizontally, which works fine.

But what I now need to do is center the blue block vertically.

The blue block can't have any fixed dimensions, though the red block can.

Here's my CSS:

section {
  width: 500px;
  height: 300px;
  background: red;
}
.options {
  display:table;
  margin: 0 auto;
  background: blue;
}
h2 {
  text-align: center;
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  text-align: left;
}

And HTML:

<section>
  <div class="options">
    <h2>My question</h2>
    <ul>
      <li>Ligula Quam</li>
      <li>Condimentum Nullam Mollis</li>
      <li>Aenean</li>
      <li>Commodo Dolor Nibh Ligula Vulputate</li>
    </ul>
  </div>
</section>

解决方案

Here's a solution for centering DIVs vertically, with fallbacks for various browsers, including older IE versions.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[edit]

Translated, your fiddle becomes like this:

http://jsfiddle.net/GolezTrol/BUbmz/1/

这篇关于中心垂直和水平块具有动态的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！