Как я могу контролировать ширину <div> с display: table; с элементом <p> внутри с display: table-cell

Question

Как я могу контролировать ширину <div> с display: table; с элементом <p> внутри с display: table-cell

0

У меня есть макет, где я должен сделать вертикальный центр, с внутренним поворотным текстом. Смотрите скрипту: 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 width имел ширину 15 пикселей. Как и в этой скрипке: http://jsfiddle.net/C7mCc/4/, где я удалил .v-center и .vc-content и, следовательно, не имел текста по вертикали по центру.

Как я могу контролировать ширину div?

mschadegg 18 фев. 2014, в 21:23

Источник

Теги:

html

css

html5

css3

3 ответа

0

для установки ширины для элемента, отображаемого в виде таблицы, вы используете: table-layout:fixed;

Но вы не говорите, что хотите также повернуть текст.

Чтобы повернуть этот текст, вам понадобится white-space:nowrap если более одного слова (15px действительно мало).

для замены этого текста в середине вам понадобится translate(); и установить этот текст в контейнере, отображаемом в виде таблицы, поэтому он расширяется более чем на 15 пикселей и делает перевод пригодным для использования.

здесь пример с 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 ;).

G-Cyr 18 фев. 2014, в 20:56

0

Похоже, вы ищете не селектор:

/* 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;
}

cimmanon 18 фев. 2014, в 18:50

Ещё вопросы

wuno · Accepted Answer · 2014-02-18T20-35-00.000Z

Это оказалось намного сложнее, чем я ожидал. Чтобы контролировать ширину, вы должны учитывать ваши родительские div. Здесь есть отличное объяснение:

100% блок высоты с вертикальным текстом

Хотя это для того, чтобы помочь вам, я пошел дальше и понял, как переключить этот код, чтобы поменять текст на другую сторону 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, чтобы убедиться, что они правильно отсортированы.

Дайте мне знать, если вам нужна помощь.

Спасибо. Этот пост: stackoverflow.com/questions/10843380/… очень помог мне. Вы можете увидеть мою рабочую скрипку сейчас: jsfiddle.net/C7mCc/7
Потрясающие. Да, этот пост был действительно хорошо составлен. Я рад, что ты получил это работает