Question

我正在尝试找到一种在以下所有位置的div中放置文本的解决方案：

右上方

左上方

顶部中心

中间（中间）右

中间（中间）向左

中间（中心）

右下

左下

底部中心

由于我只希望能够定位文本，并且我不希望使用valign之类的CSS属性，因为某些浏览器不支持该属性，因此我在线搜索了可能的解决方案。我在flex方面没有成功。也许不是很了解，但是我设法通过位置：相对和位置：绝对；

但是，我在这里编写的9种组合的全部列表中都取得了成功。如果有人可以完成我未能尝试定位的其余位置，并且您知道一种更好的方法或更简单的方法（不需要位置），该方法将非常有用。 =>我会很乐意听到这一消息。

这是我的代码：

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

文字使用以下位置定位所有位置：绝对；

1 个答案: