时间戳

首页 > 解决方案 > 将徽标和用户名放在页面中间

html - 将徽标和用户名放在页面中间

问题描述

我对这一切都很陌生，我只能做一些小的编辑，但仅此而已。我需要在图片中添加 Instagram、Facebook、Snapchat、Telegram 的徽标和用户名，但我真的找不到任何东西。我的英语也不够好，无法为此使用正确的搜索关键字。我需要帮助。我希望它看起来如何。

代码：https ://pastebin.com/dYHP8Rkb 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Nax Corp.</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700" rel="stylesheet">
 
    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
   
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
 
    <link rel="stylesheet" href="css/aos.css">
 
    <link rel="stylesheet" href="css/ionicons.min.css">
 
    <link rel="stylesheet" href="css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="css/jquery.timepicker.css">
 
   
 
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
 
    <div id="colorlib-page">
        <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"><i></i></a>
        <aside id="colorlib-aside" role="complementary" class="js-fullheight text-center">
           
            <nav id="colorlib-main-menu" role="navigation">
                <ul>
                    <li><a href="index.html">Home</a></li>
                   
                    <li class="colorlib-active"><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
 
            <div class="colorlib-footer">
               
                <div class="d-flex justify-content-center">
                   
                </div>
            </div>
        </aside> <!-- END COLORLIB-ASIDE -->
       
           
             
 
               
              </div>
            </div>
          </div>
        </footer>
        </div><!-- END COLORLIB-MAIN -->
    </div><!-- END COLORLIB-PAGE -->
 
  <!-- loader -->
  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
 
 
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-migrate-3.0.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.stellar.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/jquery.animateNumber.min.js"></script>
  <script src="js/bootstrap-datepicker.js"></script>
  <script src="js/jquery.timepicker.min.js"></script>
  <script src="js/scrollax.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
  <script src="js/google-map.js"></script>
  <script src="js/main.js"></script>
   
  </body>
</html>

我还需要将粉色更改为 Twitter 徽标蓝色。任何帮助表示赞赏。谢谢你。

标签： htmlcss

解决方案

我建议一个简单的 HTML 表格：

<table style="height: 500px; margin-left: auto; margin-right: auto;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>

<!-- LOGO 1 -->
<td style="width: 100%;">
<p style="text-align: center;"><img src="/logo1.jpg" alt="" width="50" height="50" /></p>
<p style="text-align: center;">Username1</p>
</td>
</tr>
<tr>

<!-- LOGO 2 -->
<td style="width: 100%;">&nbsp;
<p style="text-align: center;"><img src="/logo2.jpg" alt="" width="50" height="50" /></p>
<p style="text-align: center;">Username2</p>
</td>
</tr>
<tr>

<!-- LOGO 3 -->
<td style="width: 100%;">&nbsp;
<p style="text-align: center;"><img src="/logo3.jpg" alt="" width="50" height="50" /></p>
<p style="text-align: center;">Username3</p>
</td>
</tr>
<tr>

<!-- LOGO 4 -->
<td style="width: 100%;">&nbsp;
<p style="text-align: center;"><img src="/logo4.jpg" alt="" width="50" height="50" /></p>
<p style="text-align: center;">Username4</p>
</td>
</tr>
</table>

您可以使用其他更理想的选项，例如 CSS 容器等。但如果您正在寻找快速修复，则可以使用上述选项。

（请注意，您需要更改/logo#.jpg为您自己的图像和Username#您自己的文字。）

推荐阅读