центральные и позиционные элементы в CSS

0

Я застрял с моим кодом HTML/CSS, где мне нужно горизонтально центрировать два div (A, B) с фоновыми изображениями в одном абсолютно позиционированном div (C).

Беринга:

  • нижний край большего div (A) должен находиться внизу (C).
  • верхний край (A) должен находиться на верхнем краю (B).
  • (B) должен быть позади (A), который, как мне кажется, требует того же свойства position.
  • количество добавленных внутренних элементов div в (C) div не ограничено

Вот моя сцена, где мне удалось расположить (A) div внутри (C) http://jsfiddle.net/meridius/DGexR/ Но независимо от того, что я делаю, я не могу выполнить остальные.

РЕДАКТИРОВАТЬ:
Вот как это должно выглядеть как Изображение 174551

Предварительный просмотр кода:
Для рабочего примера (с фоновым изображением) см. Вышеупомянутую скрипку.

HTML

<div class="desk">
    <div class="figure">        
        <div class="type sprites-sachy sprite-WKing"></div>
        <div class="special sprites-sachy sprite-halo"></div>
    </div>
</div>

CSS

.desk { /* this class must not be touched */
    position: absolute; 
    top: 129px; 
    left: 202px;    
    border: 1px solid #FF0000; 
    width: 65px;    
    height: 65px;
    padding: 0;
    float: left;
}
.figure {
    bottom: 0;
    left: 50%;
    position: absolute;
}
.type {
    margin-left:-50%;
    z-index:2;
}
.special {
    border: 1px solid #008000;
    z-index:1;
  /*   display:none; uncomment this to see .figurka centered how it is supposed to */
}

ЗАМЕТКА:
Я бы хотел, чтобы этот вопрос не закрывался как слишком локализованный, поэтому позвольте мне сначала заявить, что я считаю, что я не единственный, у кого проблемы с позиционированием (и центрированием) элементов в CSS.

  • 1
    Включите ваш код в ваш вопрос, пожалуйста.
  • 2
    «Я считаю, что я не единственный, у кого проблемы с позиционированием (и центрированием) элементов в CSS» - ну, вы тоже не первый, кто спрашивает об этом. В Интернете много и много дискуссий о различных методах центрирования элементов с помощью CSS.
Показать ещё 2 комментария
Теги:
background-image
css-position

3 ответа

1
Лучший ответ

Когда вы используете display: none или position: absolute, .special вынимается из потока, а .type центрируется правильно.

Чтобы .special горизонтально, вы можете использовать технику из CSS-TRICKS: центрирование элементов ширины и высоты в процентах: переместите его вверх и половину ширины влево

.special {
    position: absolute;
    top: 0;
    transform: translate(-50%, 0);
}

Единственный элемент слева перемещается. .special за .type с z-index: -1.

Посмотреть полный JSFiddle

Поскольку вы знаете, что ширина .sprite-halo составляет 78px, вы всегда можете использовать пиксельные значения, конечно

.special {
    position: absolute;
    top: 0;
    left: -39px;
}

См. Также @Bipin Kumar Pal ответ.

JSFiddle

Поделиться
  • 0
    Это потрясающе, это именно то, чего я хотел достичь! Я немного боюсь свойства transform которое является экспериментальным, и IE поддерживает его только с v9 и выше. Я надеюсь, что смогу убедить нескольких людей, которых я знаю, используя v8 на WinXP, перейти на более зрелый браузер. Если вам случится знать, как добиться того же результата без transform , я был бы более чем благодарен. Если нет, то все равно спасибо.
  • 0
    Мне не нравится ответ @Bipin Kumar Pal, потому что он жестко устанавливает .special {left} в px. Я бы предпочел увидеть это в процентах, потому что приложение использует разные. Специальные изображения, и я не хочу, чтобы телефонная трубка делилась пополам для каждого из них.
0 
.sprite-halo{ background-position: 0 -1700px; width: 78px; height: 12px; background-color:darkgreen; position:absolute; top:0; left:-40px; z-index:-5;}

используйте этот код. Моя сторона работает.

Поделиться
0

Итак, вы получили эту структуру:

<div class="desk">
    <div class="figure">
        <div class="type"></div>
        <div class="special"></div>
    </div>
</div>

Убедитесь, что.desk является абсолютным или относительным позиционированием (что вы сделали). Обратите внимание, что поплавок ничего не сделает. На данный момент я предполагаю, что.type 200px h/200px w и.special - 150px h/150px w.

.desk { position: absolute; .. }
.desk .figure { position: absolute; width: 200px; height: 200px; bottom: 0; left: 50%; margin-left: -100px; }
.desk .type { position: absolute; z-index: 2; margin-left: -100px; left: 50%; top: 0; }
.desk .special { position: absolute; z-index: 1; margin-left: -75px; left: 50%; top: 0; }

Это.

Поделиться
  • 0
    Спасибо за ваш ответ, но я «поиграл» с вашим решением jsfiddle.net/meridius/Ndhr8 и, как вы можете видеть, это просто беспорядок. Также я бы хотел не использовать размеры в пикселях и использовать проценты.
  • 0
    Я немного обновил скрипку, и она работает как шарм. Имейте в виду, что элементы с абсолютным позиционированием должны иметь размерность. Я ввел .type и .special в качестве новой оболочки, в которой содержатся используемые вами спрайты. Теперь вы можете просто использовать margin: auto для центрирования этих элементов. Вам все еще нужны некоторые фиксированные размеры.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню