时间戳

首页 > 解决方案 > 如何添加带有超链接的图片并将它们对齐到我的线框中的中心？

html - 如何添加带有超链接的图片并将它们对齐到我的线框中的中心？

问题描述

这是我的线框图：

这是我的线框 所以我实际上是在为我的迷你项目创建一个网页，我已经包含了上面的线框，我实际上需要放置两张带有链接的图片，并使用页脚和 sidenav 后退按钮在我的页面上居中对齐，所以我成功创建了页脚和sidenav，但我需要把我的两张照片和超链接放在一起，并将它们对齐到线框中的中心。请参考线框图。

这是我的css和html代码

/*the sidebar back button*/

/* Style the links inside the sidenav */

#mySidenav a {
  position: absolute;
  /* Position them relative to the browser window */
  left: -80px;
  /* Position them outside of the screen */
  transition: 0.3s;
  /* Adds transition on hover */
  padding: 15px;
  /* 15px padding */
  width: 100px;
  /* Sets a specific width */
  text-decoration: none;
  /* Remove underline */
  font-size: 20px;
  /* Increase font size */
  color: white;
  /* White text color */
  border-radius: 0 5px 5px 0;
  /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  left: 0;
  /* On mouse-over, make the elements appear as they should */
}


/* The about link: 20px from the top with a green background */

#about {
  top: 20px;
  background-color: #42beb8;
}


/*The Footer*/

#footer {
  background-color: rgba(59, 195, 154, 0.87);
  width: 100%;
  height: 95px;
  border-radius: 0px;
  padding-top: 5px;
  position: relative;
  bottom: 0;
  margin-top: 20%;
}


/* footer div links settings*/

.footer a:hover {
  background-color: rgb(230, 182, 64);
  color: black;
}

#footer div {
  display: block;
  float: right;
  width: 20%;
}

/* footer links margins settings */

#footer div h5,
h2 {
  margin-bottom: 0;
  margin-top: 0;
  text-decoration: none;
}

/* horizontal line below footer div */

hr {
  width: 85%;
  margin-left: 8%;
  margin-right: 20%;
  height: 1px;
  background-color: black;
  opacity: 1;
  margin-top: 3%;
  margin-bottom: auto;
}
<!DOCTYPE html>
<html>

<head>
  <title>products</title>
  <link rel="stylesheet" href="products.css">
</head>

<body>
  <!--sidenav-->
  <div id="mySidenav" class="sidenav">
    <a href="#" id="about">Back</a>
  </div>

  <!--The footer section-->
  <footer class="footer">
    <div class="row">
      <div id="footer">
        <br>
        <div align="left">
          <h5><a href="social.html">Social Media</a></h5>
        </div>
        <div align="left">
          <h5><a href="mainpage.html">Home</a></h5>
        </div>
        <div align="center">
          <h2> <a href="mainpage.html">Buystuff</a>
            <h2>
        </div>
        <div align="right">
          <h5><a href="games.html">Games</a></h5>
        </div>
        <div align="right">
          <h5> <a href="products.html">Products</a></h5>
        </div>
        <hr>
      </div>

    </div>
  </footer>

</body>

</html>

标签： htmlcss

解决方案

使用弹性盒

/*the sidebar back button*/
/* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  left: -80px; /* Position them outside of the screen */
  transition: 0.3s; /* Adds transition on hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* Sets a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#about {
  top: 20px;
  background-color: #42beb8;
  color:red;
}

#container{
margin-top:80px;
display:flex;
justify-content:space-evenly;
align-items:center;
}


















/*The Footer*/
#footer {
    background-color: rgba(59, 195, 154, 0.87);
    width: 100%;
    height: 95px;
    border-radius: 0px;
    padding-top: 5px;
    position: relative;
    bottom: 0;
    margin-top: 20%;
    
    }
  
    /* footer div links settings*/
    .footer a:hover {
      background-color: rgb(230, 182, 64);
      color: black;
      
    }
  
  
    #footer div{
      display: block;
      float: right;
      width: 20%;
      
     
    }
  
  
  /* footer links margins settings */
    #footer div h5, h2 {
      margin-bottom: 0;
      margin-top: 0;
      text-decoration: none;
      
    }
  
  /* horizontal line below footer div */
  hr {width: 85%;margin-left: 8%;margin-right: 20%;height: 1px;background-color:black; opacity: 1;margin-top: 3%;margin-bottom: auto;}
<!DOCTYPE html>
<html>
    <head>
      <title>products</title>
      <link rel="stylesheet" href="products.css">
    </head>
    <body>
    <!--sidenav-->
    <div id="mySidenav" class="sidenav">
      <a href="#" id="about">Back</a>
    </div>


<div id='container'>

<div id='left'>
<a href="http://www.google.com"><img src="https://via.placeholder.com/250x250.jpg?" ></a>
</div>

<div id='right'>
<a href="http://www.google.com"><img src="https://via.placeholder.com/250x250.jpg?" ></a>
</div>

</div>







        <!--The footer section-->

    <footer class="footer">
      <div class="row">
        <div id="footer">
        <br>
        <div align="left"><h5><a href="social.html">Social Media</a></h5></div>
        <div align="left"><h5><a href="mainpage.html">Home</a></h5></div>
        <div align="center"><h2> <a href="mainpage.html">Buystuff</a><h2></div>
        <div align="right"><h5><a href="games.html">Games</a></h5></div>
        <div align="right"><h5> <a href="products.html">Products</a></h5></div>
        <hr>
        </div>
        
      </div>
    </footer>
   

    </body>
</html>

推荐阅读