CSS: изображение не центрировано - PullRequest
Новая
       8

CSS: изображение не центрировано

0 голосов
/ 20 сентября 2018

На этой странице https://www.inagalaxyfarfarawry.com/characters.php, Мои фотографии выровнены по правому краю на маленьких квадратах.Но когда окно уменьшается до ширины 600 пикселей, я бы хотел, чтобы изображение было центрировано.Но я понятия не имею, почему это не так.Вероятно, где-то мешает другой элемент CSS, но независимо от того, что я пробовал, и сколько бы я ни бился головой о стену, ничего не работает.

Может кто-нибудь пролить свет на то, чтопродолжается?Спасибо.

Фрагмент HTML: 

  <dl class="categories">
    <dt class="invisible">Picture</dt>
        <dd class="featureimage characterimage">
            <p>Lookin' good!<br />
                <a href="characters.php?mode=characterfocus&id=1" class="linktext">
                    <span>Click to view</span>
                    <img src="images/characters/mugshots/1.jpg" class="featureimage characterimage" />
                </a>
            </p>
        </dd>
    </dl>

Элементы CSS: 

dl.categories { margin-top: 15px; }
dl.categories dt { font-weight: bold; float: left; padding-bottom: 5px; margin: 0 5px 0 5px; clear: left; color: #AAA; }
dl.categories dd { margin-left: 200px; padding-bottom: 5px; }
dl.categories dd.featureimage p { font-weight: bold; background-color: #131210; border: 3px solid black; color: #FFFFFF; margin-right: 5px; text-align: center; border-radius: 15px; overflow: hidden; }
dd.featureimage { margin-left: 5px !important; }
dt.invisible + dd { margin-left: 5px !important; }
body.characters dl.categories dd.characterimage { font-size: 85%; }
body.characters dl.categories dd.characterimage p img.characterimage { border-radius: 0 0 15px 15px; transition: all 0.3s ease-in-out; }
body.characters dl.categories dd.characterimage p { width: 220px; height: 235px; }
body.characters dl.categories dd.characterimage p a img.characterimage:hover { opacity: 0.2; transform: scale(1.2); transition: all 0.3s ease-in-out; }
body.characters dl.categories dd.characterimage p a img.characterimage { margin-top: -85px; }
body.characters dl.categories dd.characterimage p a.linktext { color: #FFFFFF; display: block; margin-top: 70px; }
body.characters dl.categories dd.characterimage p a.linktext span { padding: 5px; }

@media (max-width: 600px) {
    dl.categories { clear: both; }
    dl.categories dt { clear: right !important; float: initial; width: 100%; clear: left; }
    dl.categories dd { clear: right !important; width: 95% !important; margin-left: 5px !important; margin-right: 5px !important; }
    dl.categories dd.featureimage, div.featureimage { float: initial; text-align: center; }
    dl.categories dd img.featureimage { float: initial; }

Да, с CSS многое происходит, и это не красиво.

1 Ответ

0 голосов
/ 20 сентября 2018

body.characters dl.categories dd.characterimage p - ваш контейнер для изображения и подписи.Вы устанавливаете его на заданную ширину и высоту, и он может сделать это, потому что это элемент уровня блока, но элементы уровня блока не ведут себя как текст.Вот почему text-align: center не работает на нем.Вместо этого вы можете использовать счастливое среднее значение display: inline-block, чтобы позволить вам одновременно придать ему ширину и центрировать его с помощью выравнивания текста.Имейте в виду, однако, что это даст ему другие свойства, такие как line-height.Чтобы учесть это, вы можете добавить vertical-align: top, чтобы убедиться, что после него не будет добавлено никакого нечетного интервала.

Короче говоря, ваше правило абзаца должно быть следующим: 

body.characters dl.categories dd.characterimage p {
    width: 220px;
    height: 235px;
    display: inline-block;
    vertical-align: top;
}
...