Question

我最近开始制作一个Web服务器，我通常使用后端代码，但是现在我有一个项目要做。我对CSS和HTML仍然很满意。因此，基本上我需要以某种方式将银行徽标下移，并且将“ Los-Santos迷宫银行”标签贴近徽标，我进行了很多研究，但我仍然不了解该职位的工作原理，宽度，显示，页边距，顶部有时起作用，有时不起作用，有时我使用向右，向左的位置，但是此时我不知道该怎么做。

这是我的网站的外观：

我的索引代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/style2.css">
    <title>Maze bank - Log In</title>
    <link rel="icon" href="https://i.ibb.co/hm8Fz83/bank.png">
    <link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
    <br>
    <img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
    <p><span style="color:white">Maze Bank Of </span>Los-Santos</p>
        <form action="http://127.0.0.1:8080/api/test?category=computers" method="POST" target="_blank">
            <div class="login-box">
                <div class="textbox">
                    <i class="fa fa-credit-card" aria-hidden="true"></i>
                    <input type="password" placeholder="Bill Number" name="bill" value="" maxlength="15" minlength="15" >
                </div>
            <div class="textbox">
                <i class="fa fa-key" aria-hidden="true"></i>
                <input type="password" placeholder="Pincode" name="pin" value="" maxlength="4" minlength="4">
            </div>
            <button class="link">Forgot password ?</button>
            <input class="btn" type="submit" name="" value="Log in">
        </form>
    </div>
    <div class="copyright">
            <h4>©™ 2019 Copyright All Rights Reserved</h4>
         </div>
</body>
</html>**strong text**

这是我的CSS代码：

@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";

p{
    display:block;
    color: #2ECC71;
    font-family: 'Teko', sans-serif;
    font-size: 50px;
    text-align: center;
    font-weight: bold;
    border-block: 2px solid black;
    text-shadow: 2px 2px #1a1111;
}

p:first-letter{ 
    display:block; 
    /*adjust the letter position for best appearance*/
    margin:4px 4px 0 5px!important;  
    /*set font family color and size*/
    color:#2ECC71; 
    font-size:1.5em; 
    font-family: 'Teko', sans-serif;
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
}


html, body{

    margin: auto;
    background: white;
    background: url(https://external-preview.redd.it/ar2z7yTm97BFzRtPJXWA_twAbm-DlDKUt3mS0R8aJtY.png?auto=webp&s=c965a508182b77fbdec96dd82d6ed224a3b17543) no-repeat fixed center;
}

.logo{
    font-family: fantasy;
}

.login-box{
    width: 280px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.textbox{
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: 1px solid #e16a74;

}

.textbox i {
    width: 26px;
    float: left;
    text-align: center;

}

.textbox input{
    border: none;
    outline: none;
    background: none;
    color: white;
    font-size: 18px;
    float: left;
    width: 80%;
    margin: 0 10px;
}

.btn{
    width: 100%;
    background: #e16a74;
    border: 2px solid #e16a74;
    margin: 12px 0 ;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    color: white;

}
.btn {border-radius: 12px;}

.copyright {
    position: absolute;
    width: 100%;
    color: #fff;
    line-height: 40px;
    bottom:0;
}

.copyright h4{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10;
    text-align: center;
}


.login-box button.link
{
    background:none;
    border:none;
    color: wheat;
    font-family: 'Teko', sans-serif;
    font-weight: normal;
    font-size: 20px;
    position:relative;
    bottom:1000%;
    left:55%;
}

Answer 1

首先，check your code to be valid ：）例如<img>元素should not have a closing tag。您应始终尝试使用有效的html，因为带有错误的html会影响浏览器中的呈现。

第二，我看到您在 之后和<body>之前添加了<img>。可能是在徽标上方留出少量空白。请勿这样做，因为这样一来，您将永远无法跨浏览器与顶部保持可靠的距离。删除 ，并在margin-top: 16px的CSS中使用img或类似的样式。

接下来，为p元素提供一个CSS类，例如并在CSS中设置其样式：

.bank-name {
  color: white;
  margin-top: 10px;
}

此p非常具体，因此您应该给它一个专用的类，因为您可以在页面上拥有其他，而这些外观不需要相同的外观。

还有两件事：

避免在html中使用内联样式。
除非有充分的理由，否则请勿使用!important。

默认情况下，也是block，因此您不需要html中的display: block。您经常可以在W3school上找到默认样式。

希望，这会有所帮助！

Answer 2

您只需要一个div标记即可重新组合图像和文本。 div必须具有display: block，以使文本不会在同一行，而在同一行。现在，根据图像的宽度，您可能需要将文本与text-align: center

对齐

您可以在w3Schools上了解有关CSS规则的更多信息

img {
display: block;
text-align: center;
}

<div>
  <img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
  <p><span>Maze Bank Of </span>Los-Santos</p>
</div>

HTML＆CSS-将对象移动到特定位置

2 个答案: