Question

我有一个布局，我必须做一个垂直的centeret，里面有旋转的文字。见小提琴：http://jsfiddle.net/C7mCc/3/ 我使用display:table;和display:table-cell;来进行垂直居中，效果很好。 HTML

<div id="top-banner-advertising-text" class="v-center">
 <p class="v-c-content">Annonce</p>
</div>

和CSS

.v-center {
    display: table;
}

.v-center .v-c-content {
    display: table-cell;
    vertical-align: middle;
}

但我只希望#top-banner-advertising-text的宽度为15px。就像在这个小提琴中一样：http://jsfiddle.net/C7mCc/4/我删除了.v-center和.v-c-content，因此没有垂直居中的文字。

如何控制div的宽度？

Answer 1

这最终比我预期的要复杂得多。要控制宽度，您必须考虑父div。这里有一个很好的解释：

100% height block with vertical text

虽然为了帮助你，我继续前进并想出如何切换此代码以将文本交换到img的另一面。

我的jsfiddle：

http://jsfiddle.net/C7mCc/6/

要回答您的问题，“我如何控制宽度”。

这是通过在css中使用以下行并确保它们匹配来完成的，

   padding-left:2em; /* line-height of .wrapper div:first-child span */

   width:2em; /* line-height of .wrapper div:first-child span */

   height:2em; /* line-height of .wrapper div:first-child span */

   line-height:2em; /* Copy to other locations */

请记住，因为你的垂直现在你必须考虑左边的填充。基本上你的线高度填充左边的宽度和高度进来玩。

我们用em控制它们以确保它们的大小正确。

如果您需要帮助，请告诉我。

Answer 2

听起来你正在寻找不是选择器：

/* if it must not have the vertical centering class */
#top-banner-advertising-text:not(.v-center) {
    width: 15px;
}

http://jsfiddle.net/C7mCc/5/

或者，您可以在第二个示例中保留宽度，并添加：

#top-banner-advertising-text.v-center {
    width: auto;
}

Answer 3

要为显示为表格的元素设置宽度，请使用：table-layout:fixed;

但你并没有说你想要旋转文字。

要旋转该文字，如果有多个单词（15px非常小），则需要white-space:nowrap。

要在中间替换该文本，您需要translate();并将该文本设置为显示为表格的容器，因此它扩展超过15px并使翻译可用。

这里有一个示例，其中2版本旋转了90和-90度：http://codepen.io/gc-nomade/pen/JuAio。

对于较早的IE，请搜索旧的writing-mode http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx;）。

如何用display：table控制<div>的宽度;内部带有<p>元素，显示：table-cell </p> </div>

3 个答案: