Блог

Главная - Вопросы по программированию - Как добавить изображение в рамку

Как добавить изображение в рамку

#html #css

#HTML #css

Вопрос:

Итак, у меня проблема с 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:

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

Комментарии:

1. Можете ли вы добавить больше кода предоставленного вами кода недостаточно

2. @PrathameshKoshti Проверьте, может ли помочь новый код, который я добавил

Ответ №1:

Вы можете просто добавить изображение <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=328amp;d=identiconamp;r=PGamp;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=328amp;d=identiconamp;r=PGamp;f=1" alt="Avatar"><h1>Spectric</h1></div>
   <div style="text-align:right">
      <button class="button" href="*">Compras</button>
   </div>

Комментарии:

1. @Spetric Спасибо, братан, я немного изменил код, и это здорово.

2. @G4ver_Dev Рад помочь: P. Кроме того, оно «спектральное» 😉