Question

因此，我只是发现了html / css编程世界，我的目标是 将图像与中间的链接并排对齐 。现在，我正在尝试输入文字。

我的问题是：我在文本部分使用transform: translate();，但是如果我在float:left图片中，文本将停留在正文的中心，而不是图片的中心，并将被堆叠。

或者有更好的方法吗？

html

<!DOCTYPE html>
<html>
<head>
    <title>Twice</title>
    <link rel="stylesheet" type="text/css" href="twices.css">
    <link href="https://fonts.googleapis.com/css?family=Lora:700&display=swap" rel="stylesheet">

</head>
<body>
    <h1>Twice</h1>

    <div>
        <div class="container">
            <img src="nayeon.jpg" alt="nayeon" name="Nayeon">
            <div class="middle">
                <div class="text" style="color:#81d4fa">Nayon</div>
            </div>
        </div>

        <div class="container">
            <img src="jeongyeon.jpg">
            <div class="middle">
                <div class="text" style="color:#81d4fa">Jeongyeon</div>
            </div>
        </div>


</body>
</html>

css

img{
    border-radius: 10%;
    float: left;
    width: 10%;
    margin: 0.5%;
}
.container{
    position: relative;
    text-align: center;
    color: white;
}

.middle{
    transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
  transform: translate(-590%, -250%);
}

.text{
    font-family: Lora;
    color: white;
    position: absolute;
    font-size: 16px;
    padding: 16px 32px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

example of what I want

----------------------------------------更新------ --------------------------

我实际上弄清楚了我必须做的。如果有人需要，请将其放在这里。看起来很傻，但是我很难受。

答案：float属性必须到达图像和文本，因此我将图像中的float:left转移到同时包含图像和文本的de div类。简直不敢相信。

新html

<!DOCTYPE html>
<html>
<head>
    <title>Twice</title>
    <link rel="stylesheet" type="text/css" href="twices.css">
    <link href="https://fonts.googleapis.com/css?family=Lora:700&display=swap" rel="stylesheet">

</head>
<body>
    <h1>Twice</h1>

    <div>
        <div class="container">
            <img src="nayeon.jpg" alt="nayeon" name="Nayeon">
            <div class="middle">
                <div class="link" ><a href="" style="color:#81d4fa">Nayon</a></div>
            </div>
        </div>

        <div class="container">
            <img src="jeongyeon.jpg">
            <div class="middle">
                <div class="link" ><a href="" style="color:#aed581">Jeongyeon</a></div>
            </div>
        </div>

        <div class="container">
            <img src="momo.jpg">
            <div class="middle">
                <div class="link" ><a href="" style="color:#ffcdd2">Momo</a></div>
            </div>
        </div>
        <div class="container">
            <img src="sana.jpg">
            <div class="middle">
                <div class="link" ><a href="" style="color:#9fa8da">Sana</a></div>
            </div>
        </div>
        <div class="container">
            <img src="jihyo.jpg">
            <div class="middle">
                <div class="link" ><a href="" style="color:#ffb74d">Jihyo</a></div>
            </div>
        </div>
        <div class="container">
            <img src="mina.jpg">
            <div class="middle">
                <div class="link" ><a href="" style="color:#80cbc4">Mina</a></div>
            </div>
        </div>
        <div class="container">
            <img src="dahyun.jpg">
            <div class="middle">
                <div class="link" ><a href="" style="color:#ffffff">Dahyun</a></div>
            </div>
        </div>
        <div class="container">
            <img src="chaeyoung.jpg">
            <div class="middle">
                <div class="link" ><a href="" style="color:#ff1744">Chaeyoung</a></div>
            </div>
        </div>
        <div class="container">
            <img src="tzuyu.jpg">
            <div class="middle">
                <div class="link" ><a href="" style="color:#0277bd">Tzuyu</a></div>
            </div>
        </div>
    </div>

</body>
</html>

新CSS

img{
    border-radius: 10%;
    /*float: left;*/
    width: 100%;
}
.container{
    margin: 0.5%;
    position: relative;
    text-align: center;
    width: 10%;
    color: white;
    float: left;/*--------- o float é no conteúdo todo--------------*/
}

.middle{
    /*transition: .5s ease;*/
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
  transform: translate(-590%, -250%);
}

.link{
    font-family: Lora;
    color: white;
    position: absolute;
    font-size: 16px;
    padding: 16px 32px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

a{
    text-decoration: none;
}

如何应用transform（）转换为带float：left的图片？

0 个答案: