文本定位所有位置 position: absolute;

Question

我正在尝试在以下所有位置找到在 div 内定位文本的解决方案：

右上角

左上角

顶部居中

中（中）右

中（中）左

Middle (Center) 中心

右下角

左下角

底部居中

由于我希望只能定位文本，而且我不想像valign那样使用css 属性，因为它不被一些浏览器支持，所以我在网上搜索了可能的解决方案。我在 flex 上没有成功。也许不太了解，但我设法想出的是通过 position: relative 和 position: absolute 进行定位；

但是，我在此处编写的 9 种组合的整个列表中的某些组合取得了成功。如果有人能完成我未能尝试和定位的其余位置，并且如果您知道更好的方法或更简单的方法，它不需要 position: 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>

谢谢！

Answer 1

<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>

文本定位所有位置 position: absolute;

Text Positioning all locations with position: absolute;

css

css-position