如何在边框中添加图像

debugcn 发表于 Dev

G4ver

因此，我在CSS和HTML方面遇到了问题。

我想使图像适合h1元素的边框。

图片CSS代码：

.img{  
  height:50px;
  width:70px;
}

HTML程式码：

<head>
   <title>Test</title>
   <link rel="Stylesheet" href="Style.css">
</head>

<body>
   <img class="img" src="[ProfilePic][1]" alt="Avatar">
   <h1 class="center"> Test</h1>
   <div style="text-align:right">
      <button class="button" href="*">Compras</button>
   </div>
</body>

中心班：

.center{
    text-align: center;
    border-radius: 100 px;
    background-color: lightblue;

}

h1类：

h1{
    padding-top: 20px;
    padding-left: 10px;
    border: solid;
    text-align: center;
    font-family: Arial;
    font-size: 68px
}

光谱的

您可以直接将图像添加到<h1>标签中。

另外，由于您有多余的空间border-radius，因此您的课程的属性center不会被应用。

.img{  
/*
  height:50px;
  width:70px;
  */
}
.center{
    text-align: center;
    border-radius: 100px;
    background-color: lightblue;

}
h1{
    padding-top: 20px;
    padding-left: 10px;
    border: solid;
    text-align: center;
    font-family: Arial;
    font-size: 68px
}

<h1 class="center"> <img class="img" src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=328&d=identicon&r=PG&f=1" alt="Avatar"><br>Spectric</h1>
   <div style="text-align:right">
      <button class="button" href="*">Compras</button>
   </div>

或者，您可以使用a<div>将两个包围起来，如下所示：

.img{  
/*
  height:50px;
  width:70px;
  */
}
.center{
    text-align: center;
    border-radius: 100px;
    background-color: lightblue;
    border: solid;
}
h1{
    padding-top: 20px;
    padding-left: 10px;
    
    text-align: center;
    font-family: Arial;
    font-size: 68px
}

<div class="center">
<img class="img" src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=328&d=identicon&r=PG&f=1" alt="Avatar"><h1>Spectric</h1></div>
   <div style="text-align:right">
      <button class="button" href="*">Compras</button>
   </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。