Question

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是here

Answer 1

嗨，SunSky我把你的小提琴分叉并制作了这个小提琴，你可以使用transformation属性来旋转文本。这应该适用于webkit浏览器，mozilla，opera和IE9。我没有在早期版本的IE上尝试它，但它应该至少在IE版本7和8中工作。transform属性适用于提到的浏览器，除了＆lt; = IE8 for IE 7,8我把css属性writing-mode:tb-lr;和text-orientation:sideways-lr;可在这些较旧的IE浏览器中获得所需的效果。你必须使用这些值来获得你真正想要的东西。使用transformations更容易，因为您只需要将其旋转到您想要的点，如果您想将其居中或从divCenter的边缘移动它只需使用paddings，将您使用margin-left:auto;和margin-right:auto;的框放在中心位置，您需要设置一个width设置，您可以使用100％jsfiddle，这样您就可以看到代码，而且这里是W3 writing-mode documentation。如果您有任何其他问题或意见可以随时提出/评论，我希望这会有所帮助。

修改

我没有仔细阅读这个问题，我将把信息留下来作为文本转换的附加信息来创建垂直文本。要将垂直文本居中，您可以查看链接It's about how to vertically align and how not do it，最后的示例可能是您正在寻找的那个，如果这不起作用，Stackoverflow上的一些问题可以帮助您在这里链接：

Vertically Align text in a Div有一些指向更多信息的链接。

How do I vertically align text next to an image with CSS?对于这个，检查第二个答案很简单，并提供一些很好的提示和方法来实现你想要的。我希望这会有所帮助，这就是你真正想要的。这是最后期jsfiddle，它应该按照您的意愿运作，您需要做的是将height和width设置为垂直居中，然后将top属性设为50％然后，对于margin-top属性，将height的{{1}}的负半部分放在中心位置。如果您需要将此对齐应用于所有div，只需使用每个相应divs中的CSS属性，或者为了更简单的代码，使用这些代码创建类（div）属性，只需将其添加到您希望文本垂直对齐的元素。

文本的垂直对齐和另一个内部的div

1 个答案: