Изображение не будет сосредоточено

Question

У меня очень тяжелое время, чтобы получить это изображение по центру.

Я попытался следующим:

margin: 0 auto; 
display: block; 

text-align: center; 

Я действительно не хочу, чтобы использовать команду left, потому что он не работает в моей мобильной обстановке. Я просто хочу фиксированное свойство, которое будет работать везде, и мне не придется добавлять его снова.

Почему изображение не центрировано?

#section3-container { 
 
    position: absolute; 
 
    top: 25%; 
 
    text-align: center; 
 
    width: 80%; 
 
    margin: 0 10%; 
 
} 
 
.approach-tablet { 
 
    bottom: 0; 
 
    position: relative; 
 
    /*left: 50%;*/ 
 
    height: 200px; 
 
    width: auto; 
 

 
} 
 
.approach-tablet img { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div id="section3-container"> 
 
</div> 
 
<img src="/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">

Я также попытался ниже, но он по-прежнему не работает.

.approach-tablet { 
    bottom: 0; 
    position: absolute; 
    /*left: 50%;*/ 
} 
img.approach-tablet { 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 

мне нужно position: absolute позиционировать DIV, где я желая, чтобы идти. Он находится в нижней части страницы. Независимо от того, изображение не центрируется с тем, что там.

Answer 1

Как указано в this SO answer, элемент, который позиционируется абсолютно, не может быть центрирован с использованием метода margin: 0 auto, и вам придется прибегать к другим вариантам.

Одним из вариантов было бы использовать left: 50%, а затем использовать transform: translateX(-50%), чтобы вернуть его в центр. left: 50% смещает изображение на 50% от левого края страницы (но это само по себе не будет центрировать изображение, так как левый край изображения находится в центре страницы). translateX(-50%) перемещает изображение влево на половину ширины изображения и, следовательно, приведет к тому, что центр изображения будет находиться в центре страницы.

Это должно работать во всех современных браузерах (включая мобильные) в качестве browser support is good. Как видно из фрагмента (просмотреть его в обычном режиме и режиме полностраничной страницы), для его реагирования не требуется специальной настройки.

Примечание: Хотя ты сказал, что вы не хотите использовать left свойство в вопросе, я понимаю, основываясь на ваш комментарий, что причиной было то, что мобильная поддержка необходима и быть отзывчивым.

#section3-container { 
 
    position: absolute; 
 
    top: 25%; 
 
    text-align: center; 
 
    width: 80%; 
 
    margin: 0 10%; 
 
} 
 
.approach-tablet { 
 
    bottom: 0; 
 
    position: absolute; 
 
    left: 50%; 
 
    height: 200px; 
 
    transform: translateX(-50%); 
 
}

<div id="section3-container"> 
 
</div> 
 
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">

Answer 2

Ваше изображение вне рамок. Если вы поместите его внутрь, центры

#section3-container { 
 
\t position: absolute; 
 
\t top: 25%; 
 
\t text-align: center; 
 
\t width: 80%; 
 
    margin: 0 10%; 
 
} 
 
.approach-tablet { 
 
    bottom: 0; 
 
    position: relative; 
 
\t /*left: 50%;*/ 
 
    height: 200px; 
 
    width: auto; 
 

 
} 
 
.approach-tablet img { 
 
\t display: block; 
 
\t margin: 0 auto; 
 
}

<div id="section3-container"> 
 
    <img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet"> 
 
</div>

Answer 3

Пожалуйста, используйте ниже код

<div id="section3-container"> 
    <img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet"> 
</div> 

CSS

#section3-container { 
margin: 0 auto; 
text-align: center; 
width: 100%; 
} 
.approach-tablet { 
height: 200px; 
margin: 0 auto; 
text-align: center; 
width: auto; 
} 

Answer 4

Просто добавьте другой DIV, HTML все о дивы:

#section3-container { 
 
\t position: absolute; 
 
\t top: 25%; 
 
\t text-align: center; 
 
\t width: 80%; 
 
    margin: 0 10%; 
 
} 
 
.approach-tablet { 
 
    bottom: 0; 
 
    position: relative; 
 
\t /*left: 50%;*/ 
 
    height: 200px; 
 
    width: auto; 
 

 
} 
 

 
.approach-tablet img { 
 
\t display: block; 
 
\t margin: 0 auto; 
 
} 
 

 
#section4-container { 
 
\t text-align: center; 
 
\t width: 100%; 
 
}

<div id="section3-container"> 
 
</div> 
 
<div id="section4-container"> 
 
    <img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet"> 
 
</div>