То же правило CSS, разные результаты

Question

То же правило CSS, разные результаты

0

У меня есть div с изображением внутри него. Я пытаюсь центрировать его, но он не работает. У меня есть другое правило CSS, которое выравнивает что-то еще, поэтому я попытался применить это, и он работает! Но содержание этих правил одинаково.

Вот этот блок:

<div id = "dlbutton">
    <a href="signup.html"><img src="img/arrow2.png"></a>
</div>

Вот правила:

#dlbutton 
{
     font-size: 2em;
     text-align: center;
}

#arrowbutton
{
     font-size: 2em;
     text-align: center;
}

когда я применяю #arrowbutton, он выравнивается влево, когда я применяю #dlbutton, его выравнивание по центру. Эта проблема возникает в Android-хроме, в браузере "Интернет" на S3 эта проблема не существует.

dubdub 20 март 2014, в 21:07

Источник

0

Если это отличается, то у вас есть разные стили, влияющие на элементы. Можно ли предоставить больше кода?
JimmyRare 20 март 2014, в 19:22

Теги:

html

android

css

google-chrome

2 ответа

Ещё вопросы

Если это отличается, то у вас есть разные стили, влияющие на элементы. Можно ли предоставить больше кода?

Longblog · Answer 1 · 2014-03-20T17-55-00.000Z

Является ли #dbbutton ниже в таблице стилей, чем #arrowbutton? Вероятно, у вас есть другое правило с большей спецификой, перезаписывающее правило #arrowbutton. Осмотрите элемент с помощью инструмента веб-разработчика и посмотрите, какие стильные селектора применяются к div и изображению.

Использование выравнивания по тексту на изображениях не всегда приведет к желаемым результатам, поскольку разные браузеры обрабатывают изображения и выравнивают текст по-разному. Вероятно, лучший способ надежно центрировать изображения - использовать следующий код:

.imgcenter {
    display: block;
    margin: 0 auto; 
}

Затем вызовите класс imgcenter на любое изображение, которое вы хотите по центру:

<img class="imgcenter" src="imagelocation/img.jpg" />

Или, если вы хотите, чтобы все ваши изображения были центрированными изображениями на уровне блоков, вы можете просто использовать img вместо класса в своих правилах CSS так:

IMG {
    display: block;
    margin: 0 auto;
}

Вы также можете использовать чистый HTML-подход (не рекомендуется), добавив <center>.

<div id = "dlbutton">
  <center>
    <a href="signup.html"><img src="img/arrow2.png"></a>
  </center>
</div>

Emilie · Answer 2 · 2014-03-20T17-20-00.000Z

Попробуйте заменить img src этим

<img style= class="align-center" src="img/arrow2.png"/>

Что нужно сделать, чтобы выполнить запрос, это выровнять текст, который у вас нет в div.