Nano Hash - криптовалюты, майнинг, программирование

Поместить этот div в центр контейнера?

Прежде чем пытаться решить эту проблему, пожалуйста, внимательно прочитайте ограничения, с которыми я имею дело.

Ограничения

  1. .pictureContainer должен оставаться position: relative (потому что у меня есть всплывающее меню, которое позиционируется абсолютно относительно него).

  2. Изображение может быть меньше 80 % от #slide, и в этом случае оно все равно должно быть выровнено по центру. Во что это переводится? Вы не можете просто сделать margin: 0 10%, потому что да, это будет центрировать этот конкретный случай, но это не удовлетворит случай, когда изображение меньше 80% ширины #slide

    Здравствуйте, я встроенный блочный элемент, который расположен рядом с другим встроенным блочным элементом, разве это не замечательно? Я думаю, это прекрасно!

html css position
13.03.2013

  • Что this div в вашем названии? 13.03.2013
  • И код в вашем посте отличается от кода в jsfiddle. 13.03.2013
  • Я думаю, вы хотите это jsfiddle.net/FZzr6/2 13.03.2013

Ответы:


1

Почему бы просто не добавить:

text-align: center;

в декларацию css для pictureContainer. Он будет центрировать любое изображение в нем.

13.03.2013

2

сначала попробуйте обернуть div class="pictureContainer" и передать css wrapper html

<div class="wrapper">        
    <div class="pictureContainer">
                <img id="currentPic" class="slideShowPic" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg"  width="350" alt="IMAGE" />

                <div class="hoverMenu">
                    <a class="nextSlide" href="#">
                        >
                    </a>
                    <a class="prevSlide" href="#">
                        <
                    </a>
                </div>
          </div>
    </div>

css

.pictureContainer {
    width: 350px;
    position: relative;
    background: red;
    padding: 0;
    margin: 0;
}

#currentPic {
    vertical-align: top;
}
.wrapper {
    margin:auto;
    width: 350px;
}

рабочая демонстрация
надеюсь, что эта помощь

13.03.2013

3

Как и ответ от @jhunlio, можно предположить:

создайте оболочку вокруг него с помощью следующего css

.wrapper {
    margin:auto;
    width: 600px;
}

Хитрость здесь в том, что ширина фиксирована, а для поля задано значение auto.

Это означает, что поля (внешнее пространство) будут равномерно распределены по сторонам обертки с фиксированной шириной. Следовательно, он находится посередине.

13.03.2013
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..