Question

我想知道如何将文本移动到小图像旁边。正如您在图像中看到的那样，文本和图标并不完全相互对齐。

h1.titu{
    margin-left: 370px;
    margin-top: 20px;
    padding-top: 1px
    color: #fff;
    font-family: arial;
    font-size: 7vw;
    text-transform: uppercase;
    background: url(../images/lines.jpg);
    background-size: cover;
    -webkit-text-fill-color:
    transparent;
    -webkit-background-clip: text;
}

.socialmedia {
    margin-left: 400px;
}

img.eye{
    float: right;
    padding-right: 240px;
}

img.instagram{
    padding-left: 190px;
}

img.twitter{
}

<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body id ="contact">
  
<h1 class="titu">contact</h1>
    
</body>
<div class="socialmedia">
<p >  
<img class="insta" src="../images/insta.png" width="60"> 
    
    Juliancmr
</p>   
     
 <p>  
<img class="twitter"src="../images/twitter.png" width="60">
     Julian Mancera
</p>     
     
    
<p>  
<img class="twitter"src="../images/in.png" width="60">
    Julian.mr mancera
</p> 

    
<p>  
<img class="mail" src="../images/mail.png" width="60">
    
    Julian.mr@hotmail.com
</p> 
    </div>

</html>

Answer 1

在图像上使用垂直对齐，您可以像这样定位一周

.socialmedia img{
   vertical-align:-10px;
}

根据自己的喜好上下调整-10px

Answer 2

如果将图像和文本放在具有display：flex的div中，它将使内容居中对齐。像这样：

<div class="flex-row">
     <img src="image-src.jpg">
     <p>caption<p>
     <img src="image-src.jpg">
     <p>caption<p>
</div>

工作小提琴： https://jsfiddle.net/02sgLq1n/2/

Answer 3

首先，您给定html中的body标记过早关闭（它在div之前，应在正文内容的末尾，即</html>标记之前）。另外，如先前的答案中所述，body标签没有ID，它是一个本机标签，可以在CSS中称为body{}。

关于放置图标的问题，我也建议使用flex，尽管您是一个初学者，但它可能已经在跑步之前开始运行了。我已链接到一篇文章，如果您想使用它，它是一本好书。

您正在按原样使用许多类来设置图标样式。如果您希望图标具有类似的高度/宽度/位置，建议您使用一个图标类，并在HTML中设置img src。

使用flex的示例代码段

#container {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  align-items: center;
  margin-left: 200px;
}

.icon {
  margin: 10px;
  height: 50px;
  width: 50px;
  background-color: lightgrey;
  border: 1px solid grey;
}

<div id="container">
  <div class='flex-row'>
    <img class='icon' src=" " alt="Insta icon">
    <p>Instagram</p>
  </div>
  <div class='flex-row'>
    <img class='icon' src="https://image.flaticon.com/icons/svg/1051/1051280.svg" alt="Twitter icon">
    <p>Julian.mr mancera</p>
  </div>
  <div class='flex-row'>
    <img class='icon' src=" " alt="LkedIn icon">
    <p>LinkedIn</p>
  </div>
  <div class='flex-row'>
    <img class='icon' src=" " alt="Email icon">
    <p>E-mail</p>
  </div>
</div>

或者您可以将display:inline-block与vertical-align:middle结合使用，以使img /段落对齐如下：（jsfiddle）

#container {
  display: inline-block;
}

.socialmed {
  display: inline-block;
  margin: 0 0 0 200px;
}

.smtext {
  color: red;
  font-family: "Verdana", sans-serif;
  font-size:10pt;
}

.icon {
  margin: 10px;
  height: 50px;
  width: 50px;
  background-color: lightgrey;
  border: 1px solid grey;
}

.icon, .smtext {
  display: inline-block;
  vertical-align: middle;
}

<div id="container">
  <div class='socialmed'>
    <img class='icon' src=" " alt="Insta icon">
    <p class='smtext'>Instagram</p>
  </div>
  <div class='socialmed'>
    <img class='icon' src="https://image.flaticon.com/icons/svg/1051/1051280.svg" alt="Twitter icon">
    <p class='smtext'>Julian.mr mancera</p>
  </div>
  <div class='socialmed'>
    <img class='icon' src=" " alt="LkedIn icon">
    <p class='smtext'>LinkedIn</p>
  </div>
  <div class='socialmed'>
    <img class='icon' src=" " alt="Email icon">
    <p class='smtext'>E-mail</p>
  </div>
</div>

希望这会有所帮助！

CSS中图标旁边的图像

3 个答案: