1

我正在制作动态幻灯片。

我正在尝试获取一些我动态分配的文本，以便在一个框内居中和垂直对齐。

到目前为止，我有：

HTML

  <body>
  <div class="slide">
    <span class="content">
       <b>Hello. This text needs to be:</b><br><br> 
       - left-aligned but <br>
       - centered in the grey box<br> 
       - even if it changes<br>
       - the center of the white box <br> 
         should equal center of grey one.
    </span>
  </div>  
  </body>

CSS

.slide {
  position:relative;
  background-color: #ddd;
  width: 300px;
  height: 300px
}

.content {
  position: absolute;
  top: 30%;
  left: 15%;
  background-color: #fff;
}

输出

输出

这不起作用，因为如果文本更改，它将不再是中心。任何人有任何想法如何解决这个问题？

http://jsbin.com/uyiFiwI/23/edit

4

3 回答 3

3

这可以满足您的需求，但依赖于display: table-cell旧浏览器不支持的功能。

.slide {
  position:relative;
  background-color: #ddd;
  display: table-cell;
  width: 300px;
  height: 300px;
  text-align: center; 
  vertical-align: middle;
}

.content {
  background-color: #fff;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

我认为对于旧版浏览器没有不改变 HTML 的解决方案。

编辑：你不需要一个固定的高度.content

编辑：删除border: 1px solid gray用于调试。

编辑：根据@Shomz 的建议进行更改（使用新的、不同的.content宽度标准）。

于 2013-08-18T06:14:26.540 回答
1

如果你不介意幻灯片的高度，这样的事情在任何场合都可以完美地工作：

div.slide {
  position:relative;
  background-color: #ddd;
  text-align: center;
}

div.content {
  text-align: left;
  position: relative;
  display: inline-block;
  margin: 10% auto;
  background-color: #fff;
}

http://jsbin.com/uyiFiwI/28/edit

但是，如果您的 .slide div 需要具有固定高度，则您可能需要使用 JavaScript 来正确计算内容 div 的呈现高度，或者使用可能在所有浏览器中都可以使用的 hacky CSS，正如 @David 建议的那样。

于 2013-08-18T06:19:12.037 回答
1

如果您愿意稍微更改标记，使用列表可以帮助您清理一些换行符和间距问题。

将其与display: table-cell@David-SkyMesh 在他的回答中所做的相结合将为您提供一个更易于管理的列表。

HTML

  <div class="slide">
    <div class="content">
      <b>Hello. This text needs to be:</b>
      <ul>
        <li>left-aligned but</li>
        <li>centered in the grey box</li> 
        <li>even if it changes</li>
        <li>the center of the white box this this is really long text not the gray one should equal center of grey one.</li>
      </ul>
    </div>
  </div>

CSS

.slide {
  position:relative;
  background-color: #ddd;
  width: 300px;
  height: 300px;
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.content > ul > li:nth-child(1) {
  margin-top: 10px;
}

.content {
  display: block;
  margin: auto;
  background-color: #fff;
  text-align: left;
}

.content ul {
  margin: 0;
  padding: 0;
  padding-left: 20px;
}

演示 - jsBin

于 2013-08-18T07:03:21.987 回答