Question

好的，我想为EZ新手提出的最愚蠢的问题创造一个记录。我正在尝试学习Code Academy上的HTML / CSS。一切顺利，除了我无法让我的文字对齐我的图像：

<!DOCTYPE html>
 <html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>

        <div class="contain"><a href="http://www.google.com">
            <img src="http://nl.androlib.com/appscreenmax/ppDww.u.cs.png"; id="me"></a>
            <p id="one"; text-align="center">Help</p>
        </div>
    </body>
 </html>

/*Add your CSS below!*/

.contain {
    border-color: purple;
    border-width: 100px;
    position: absolute;
 }

#me {
    width:100px;
    height:100px;
    border-radius:100%;
    position: absolute;
}

#one {
    position: relative;
    font-size: 20px;
    text-align: center;
}

我真的一直在谷歌寻找解决方案大约两个小时，请帮忙，随意采取小便。此外，我的边框没有显示为紫色。最亲切的问候 Mugman

Answer 1

您缺少样式标记。

  <div class="contain"><a href="http://www.google.com"><img      src="http://nl.androlib.com/appscreenmax/ppDww.u.cs.png"; id="me"></a><p id="one"; text-    align="center">Help</p></div>


</body>
</html>

<style>
/*Add your CSS below!*/

.contain {
border-color: purple;
border-width: 25px;
border-style: solid;
position: absolute;
}

#me {
width:100px;
height:100px;
border-radius:100%;
position: absolute;
}

#one {
position: relative;
font-size: 20px;
text-align: center;
}
 </style>

如何在图像上对齐文本

1 个答案: