相关疑难解决方法(0)

我需要垂直居中多个不同高度的盒子.

我不知道盒子的高度,因为它们是可变文本.

我怎么能用CSS做这个(不必使用td和valign).尝试display: table-cell但似乎与IE不兼容

下图显示了设计,后贴片是浏览器窗口

删除了死的ImageShack链接

我无法垂直对准文本的背景图像,而不会分配常数(因此,不自动和可重复使用)值height或line-height.我想知道是否有一种方法可以垂直居中对齐bg图像,例如和a元素, with its text without assigning constant values to线高度or`？

现场演示如下:http://cssdesk.com/8Jsx2.

这是HTML:

<a class="">background-position: center</a>
<a class="contain">background-size: contain</a>
<a class="line-height">Constant line-height</a>

这是CSS:

a {
  display: block;
  margin: 10px;
  width: 200px;
  padding-left: 34px;
  font-size: 14px;  

  background: url('http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Thumbs%20up.png');  
  background-repeat: no-repeat;
  background-position: 5px center;

  border: 1px solid black;
}

/* I don't want to use constant line-height */
.line-height {
    line-height: 24px;
}

/* I don't want to use this, …

我试图垂直居中两个<p>元素.

我按照phrogz.net上的教程进行了操作,但仍然将元素放在div上方,在div下面,在div中顶部对齐.

我会尝试其他的东西,但这里的大多数问题只是回到那个教程.

此代码段用于网页顶部的横幅广告.

.banner {
  width: 980px;
  height: 69px;
  background-image: url(../images/nav-bg.jpg);
  background-repeat: no-repeat;
  /* color: #ffffff; */
}

.bannerleft {
  float: left;
  width: 420px;
  text-align: right;
  height: 652px;
  line-height: 52px;
  font-size: 28px;
  padding-right: 5px;
}

.bannerright {
  float: right;
  width: 555px;
  text-align: left;
  position: relative;
}

.bannerrightinner {
  position: absolute;
  top: 50%;
  height: 52px;
  margin-top: -26px;
}

<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p> …

我在这样的div里面有一个图像

<div><img /><div>

图像是动态的,没有固定的大小.div的大小200px by 200px.事先不知道图像尺寸.如果图像的大小大于190px by 190px,则将其设置为190px by 190px(即max-width:190px,max-height:190px).如何满足这些需求,使图像居中？我需要一个在Internet Explorer 7中工作的解决方案.

此处和此处的解决方案无法应用于我的问题,因为

1. 不确定图像是否小于200像素.

2. 我也想要水平对齐.

3. 没有Internet Explorer 7支持.

(Stack Overflow上有一些关于相同问题的问题,但我的情况不同,所以它们不适用于这个特定的问题.)