Как сделать так, чтобы центральная точка кнопки отображалась в центре, а не слева от элемента? - PullRequest
Новая
       29

Как сделать так, чтобы центральная точка кнопки отображалась в центре, а не слева от элемента?

1 голос
/ 26 марта 2019

У меня проблема с отображением кнопки в центре экрана. Кнопка должна быть в центре экрана, но почему-то мой CSS делает то, что центр кнопки находится в левом верхнем углу. Кто-нибудь знает почему? Еще несколько деталей: Я хочу, чтобы это было так: как это должно выглядеть

Но вместо этого это выглядит так: как это выглядит

Кто-нибудь может помочь? Вот код: 

html, body {margin: 0; height: 100%; overflow: hidden}
img 
{ 
    max-width: 100%; 
    height: auto;
    position: relative;
    top: 33%;
    
}
.obj1
{
    width: 20%;
    height: 100%;
    background: rgb(136, 44, 44);
    float:left;
    position: relative;
}
.obj2
{
    width: 20%;
    height: 100%;
    background: rgb(255, 255, 255);
    position: relative;
    float:left;
}
.obj3
{
    width: 20%;
    height: 100%;
    background: rgb(0, 0, 0);
    position: relative;
    float:left;
}
.obj4
{
    width: 20%;
    height: 100%;
    background: rgb(42, 75, 148);
    position: relative;
    float:left;
}
.obj5
{
    width: 20%;
    height: 100%;
    background: rgb(72, 114, 48);
    position: relative;
    float:left;
}
.obj6
{
    width: 20%;
    height: 100%;
    background: rgb(119, 39, 112);
    position: relative;
    float:left;
}
#show-more
{
    background: #1594e5;
    color: #fff;
    font-family: calibri; 
    display: block;
    width: 140px;
    font-size: 24px;
    text-transform: uppercase;
    padding: 10px;
    text-align: center;
    margin: 20px auto;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)        
}
<body>

    <div class="obj1">
      
    </div>
    <div class="obj2">
        
    </div>
    <div class="obj3"></div>
    <div class="obj4"></div>
    <div class="obj5"></div>
    <a id="show-more">Show More</a>

</body>

1 Ответ

1 голос
/ 26 марта 2019

Используя абсолютные позиции и верхний / левый, вы указываете на верхний левый угол элемента.Дополнительно используйте transform: translate(-50%, -50%); для перемещения кнопки вверх и влево на 50% от его высоты / ширины

...