0

HTML 

<div id="divTop">divTop</div>
<div id="divBottom">divBottom
<div id="divCenter">divCenter</div>
</div>

CSS 

html, body{
    height:100%;
}
#divTop{
    height:50px;
    background:#008080;
    color:#ffffff;
    text-align:center;
    vertical-align:middle;
}
#divBottom{
    height:100%;
    text-align:center;
    vertical-align:middle;
    border:thick solid blue;
}
#divCenter{
    width:50vmin;
    height:50vmin;
   border:medium solid red;     
}

我想要： divCenter在内部水平和垂直居中，divBottom并且所有 div 中的文本也垂直居中。
请帮忙。

jsfiddle 在这里

4

1 回答 1

1

嗨 SunSky 我叉了你的小提琴并做了这个，你可以使用transformation属性来旋转文本。这应该适用于 webkit 浏览器、mozilla、opera 和 IE9。我没有在早期版本的 IE 上尝试它，但它至少应该在 IE 版本 7 和 8 中工作。该transform属性适用于提到的浏览器，除了 <=IE8 for IE 7,8 我放置了 css 属性writing-mode:tb-lr;并text-orientation:sideways-lr;获得所需的效果在这些较旧的 IE 浏览器中。你将不得不使用这些价值观来获得你真正想要的东西。使用transformations它更容易，因为您只需将它旋转到您想要的点，如果您想将它居中或从divCenter刚刚使用的边缘移动它paddings，以使您使用的盒子居中margin-left:auto;并且margin-right:auto;这些工作您需要有一个widthset you can use 100% here's the jsfiddle这样你就可以看到代码，还有这里的W3 writing-mode 文档。我希望这会有所帮助，如果您有任何问题或意见，请随时提问/评论。

编辑：

我没有仔细阅读这个问题，我将留下信息，就像关于文本转换以创建垂直文本的附加信息一样。要使垂直文本居中，您可以查看此链接它是关于如何垂直对齐以及如何不这样做最终示例可能是您要查找的示例，如果这不起作用，Stackoverflow 上有一些问题可以帮助您在这里是链接：

垂直对齐 Div 中的文本有一些指向更多信息的链接。

如何使用 CSS 垂直对齐图像旁边的文本？对于这一点，请检查第二个答案，它很简单，并提供了一些很好的提示和归档您想要的内容的方法。我希望这会有所帮助，这就是您真正想要的。这是最新的jsfiddle，它应该像你想要的那样工作，你需要做的是设置 aheight并width垂直居中，然后为属性放置 50%，top然后为属性放置你想要居中的margin-top负一半。如果您需要将这种对齐方式应用于所有，只需使用每个对应的 CSS 属性，或者为了更简单的代码创建一个类（heightdivdivsdivHTML <div class="foo"></div> CSS .foo{}) 使用这些属性，只需将其添加到您希望文本垂直对齐的元素中。

于 2013-07-15T17:25:12.693 回答