Проблемы с кнопками HTML-привязки - PullRequest
Новая
       6

Проблемы с кнопками HTML-привязки

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

Я пытаюсь создать кнопку внизу моего сайта.

Вот мой HTML 

<center><a href="#" id="btn1" class="btn1">
    View 
</a></center>

Вот мой CSS. 

.btn1 {
    margin: 60px 0px 60px 0px;
    color: white;
    background: #ED7836;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    font-size: 20px;
}

КогдаЯ пытаюсь создать кнопку, она игнорирует мои установленные поля и выравнивается прямо в самом низу страницы.

Внизу страницы

Когда я пытаюсьустановите его позиционирование в абсолютное положение и оставьте влево: 50%, кажется, располагается в странном месте, которое находится не в центре. 

.btn1 {
    position: absolute;
    left: 50%;
    margin: 60px 0px 60px 0px;
    color: white;
    background: #ED7836;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    font-size: 20px;
}

Не выравнивается по центру

Спасибо.

1 Ответ

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

Вы должны добавить transform: translate(-50%, 0%);, чтобы сделать его точно в центре. 

.btn1 {
    position: absolute;
    left: 50%;
    margin: 60px 0px 60px 0px;
    color: white;
    background: #ED7836;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    font-size: 20px;
}

Объяснение:

Без происхождения, как вы сказали, это выглядит так (что так и должно быть на самом деле) example1 https://jsfiddle.net/z5qo8yaj/

Вам нужно использовать переводчик, чтобы переместить его относительно его источника (на половину его длины) После добавления перевод example 2 https://jsfiddle.net/h1qzdoLm/

...