Текст Позиционирование всех мест с позиции: абсолютный - PullRequest
Новая
       8

Текст Позиционирование всех мест с позиции: абсолютный

0 голосов
/ 18 ноября 2018

Я пытаюсь найти решение для размещения текста внутри div во всех следующих местах:

Вверху справа

Вверху слева

Вверху по центру

Средний (в центре) справа

Средний (в центре) слева

Средний (в центре) центр

Нижний правый

Нижний левый

Bottom Center

Так как я хочу иметь возможность размещать только текст, и я не хочу использовать свойство css, например valign, поскольку оно не поддерживается несколькими браузерами, тогда я искал в Интернете возможные решения.У меня не было успеха с flex.Может быть, недостаточно хорошо это знаю, но мне удалось придумать позиционирование по позиции: относительная и позиция: абсолютная;

Тем не менее, я добился успеха с некоторыми из всего списка из 9 комбинаций, которые я написал здесь.Было бы полезно, если бы кто-нибудь смог заполнить остальные места, которые я не смог опробовать и позиционировать, и если вы знаете лучший или более простой способ, который не требует позиции: absolute;=> Я был бы очень рад услышать об этом.

Это мой код: 

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.test {
    background-color: #C0C0C0;
    margin: 0px auto 0px auto;
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
}
.newStyle1 {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.newStyle2 {
    position: absolute;
    top: 0px;
    right: 0px;
}
.newStyle3 {
    position: absolute;
    top: 0px;
    left: 0px;
}
.newStyle4 {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.newStyle5 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="test">
    <span class="newStyle1">text</span> 
    <span class="newStyle2">text</span> 
    <span class="newStyle3">text</span> 
    <span class="newStyle4">text</span> 
    <span class="newStyle5">text</span> 
</div>
</body>
</html>

Спасибо.!

1 Ответ

0 голосов
/ 18 ноября 2018 
<head>
    <meta content="en-us" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <style type="text/css">
        .test {
            background-color: #C0C0C0;
            margin: 0px auto 0px auto;
            width: 300px;
            height: 300px;
            overflow: hidden;
            position: relative;
            text-align: center;
        }

        .newStyle1 {
            position: absolute;
            bottom: 0px;
            left: 0px;
        }

        .newStyle2 {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .newStyle3 {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .newStyle4 {
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

        .newStyle5 {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .newStyle6 {
            margin: 0;
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .newStyle7 {
            margin: 0;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .newStyle8 {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 0px;
            transform: translate(0, -50%);
        }
        .newStyle9 {
            margin: 0;
            position: absolute;
            top: 50%;
            right: 0px;
            transform: translate(0, -50%);
        }
    </style>
</head>

<body>
    <div class="test">
        <span class="newStyle1">text</span>
        <span class="newStyle2">text</span>
        <span class="newStyle3">text</span>
        <span class="newStyle4">text</span>
        <span class="newStyle5">text</span>
        <span class="newStyle6">text</span>
        <span class="newStyle7">text</span>
        <span class="newStyle8">text</span>
        <span class="newStyle9">text</span>
    </div>
</body>

</html>
...