图像不会与项目中心对齐答案

【问题标题】：Images won't align with center of project图像不会与项目中心对齐
【发布时间】：2018-08-30 12:45:54
【问题描述】：

我正在建立我的网站 - 它还有很长的路要走，而且我是新手。我有一个页面，其中包含一系列代表我的投资组合的可点击框。但是，我希望在这些框中显示的图像将自己定位在左侧而不是框的中心。有什么建议吗？

问题所在的网站：http://corey-dickinson.com/portfolio.html

代码：

<!doctype html>
<html lang="en">
  <head>
    <title>CoreyDickinson.com</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=Open+Sans:300,400,700,800|Playfair+Display:,300, 400, 700" rel="stylesheet">

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css">

    <link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">


    <!-- Theme Style -->
    <link rel="stylesheet" href="css/style.css">
      <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAq6urACkpKQD19fUA4ODgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACEwAAADEgAAIhMAADEiAAASITADEiEAAEIiEzEiJAAAMiIhEiIjAAABIiIiIhAAAAQiIiIiQAAAAyIiIiIwAAAAEiIiIQAAAABCIiIkAAAAADIiIiMAAAAAASIiEAAAAAAEIiJAAAAAAAMiIjAAAAAAABIhAAAAAAAAQiQAAADH4wAAw8MAAMGDAADAAwAAwAMAAOAHAADgBwAA4AcAAPAPAADwDwAA8A8AAPgfAAD4HwAA+B8AAPw/AAD8PwAA" rel="icon" type="image/x-icon" />
  </head>
  <body>

    <div class="site-wrap">

      <a href="#" class="offcanvas-toggle js-offcanvas-toggle">Menu</a>
      <div class="offcanvas_menu" id="offcanvas_menu">
        <ul class="mb-5">
          <li><a href="index.html">Bio</a></li>
          <li class="active"><a href="portfolio.html">Portfolio</a></li>
          <li><a href="resume.html">Resume</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <ul class="social">
          <li><a href="cdickinson01742@gmail.com" class="fa fa-at"></a></li>
          <li><a href="https://www.facebook.com/corey.dickinson" class="fa fa-facebook"></a></li>
          <li><a href="https://www.linkedin.com/in/corey-dickinson/" class="fa fa-linkedin"></a></li>
        </ul>

</br><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> and coded in Brackets by CD
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->

      </div>
         <a href="index.html" class="home-button w3-padding-large"><px-2 class="fa fa-home"></a>
          <div class="mx-auto" style="width: 200px;">
                <h1>Portfolio</h1>
            </div>

            <hr><hr>
            <div class = "container">
          <ul class="portfolio-list">
            <li>
              <a href="https://redcross.carto.com/viz/3ea45828-7769-4f92-9170-bec6c63dfc9a/public_map">
                <img src="img/arcban2.jpg" alt="" style="image-orientation: center">
                <div class="text">
                  <h3>Diaspora Mapping RC</h3>
                  <span>A project for the Red Cross that designed maps of the distribution of selected diaspora populations across the United States. The map was used by large numbers of volunteers to coordinate outreach programs.</span>
                </div>
              </a>
            </li>
            <li>
              <a href="index_search.html">
                <img src="img/qcwide.png" alt="">
                <div class="text">
                  <h3>Quiet Contractors Directory</h3>
                  <span>Project for small non-profit focused on noise polution to create a directory/webmap of environmentally friendly contractors across the US.</span>
                </div>
              </a>
            </li>
            <li>
              <a href="MukigavMutooroMap-July2017.pdf">
                <img src="img/kasiisibanner2.png" alt="">
                <div class="text">
                  <h3>Tribal Map Western Uganda</h3>
                  <span>A map produced for the Kasiisi project, a small NGO in Uganda. This map outlines the spatial patterns in different tribes in the region. This data was derived from a survey I oversaw that was distributed using XML forms in ODK. </span>
                </div>
              </a>
            </li>

            <li>
              <a href="https://www.youtube.com/watch?v=u7Cuy5AO88Y">
                <img src="img/TED_banner-resized.png" alt="">
                <div class="text">
                  <h3>TED Talk Nauru</h3>
                  <span>A TED talk outlining the results and reflections from a project I created. The project was focused on mapping the environmental degredation on Nauru, a small island nation in the South Pacific.</span>
                </div>
              </a>
            </li>

            <li>
              <a href="A)%20Report_Living_Situation_Refugee_Camps_2017.pdf">
                <img src="img/UNHCR_banner2.png" alt="">
                <div class="text">
                  <h3>Refugee Camp Report</h3>
                  <span>An analysis of quality of life patterns in Syrian refugee camps, developed for a class at Clark University. The results of this project were submitted to UNHCR.</span>
                </div>
              </a>
            </li>
             <li>
              <a href="Cape_Cod_Sand.mp4">
                <img src="img/nps-banner-2.png" alt="">
                <div class="text">
                  <h3>Analysis of changing seashore patterns</h3>
                  <span> Analyzed the effects of sea level rise on Nauset Spit for the North Atlantic Coastal Lab for Cape Cod National Seashore. The project involved exstensive research of historical maps and arial imagary.</span>
                </div>
              </a>
            </li>
          </ul>

             <div class = "container">
        <h1 class="mb-5"><a href="GISPortfolioCDICKINSON_V2.zip">Download Zip</a></h1>
        </div>

    <!-- loader -->
    <div id="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="#f4b214"/></svg></div>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/jquery.countdown.min.js"></script>
    <script src="js/main.js"></script>

  </body>
</html>

【问题讨论】：

希望有所帮助，请尝试.portfolio-list li a{text-align: center;}

标签： html css centering

【解决方案1】：

像这样为标签添加一个类

<img class="center_img" ..... />

然后在你的css中有：

img.center_img{
    margin: y_margin_values auto;
}

为margin 设置两个值将第一个值设置为顶部和底部，第二个值设置为左侧和右侧。将左右值设置为auto 将使<img> 在其容器中居中。如果这仍然不起作用，请将其设置为父 <a> 或父 <li>' to havewidth: 100% ' 或您想要的任何宽度。

【讨论】：

它只适用于显示类型是块/table/ flex/ table等。而不是默认显示类型的内联图像。

【解决方案2】：

获得所需结果的方法很少。让我们讨论其中的几个

将图像拉到中心

这里我们只是将图像拉到中心，尽管图像大小将与现在相同。所以你的li 宽度是全宽，但是如果图像的尺寸（宽度）更小，图像将位于中心。

将下面的 css 应用到您的 li 中的图像

.portfolio-list li a img
{
  display: block;
  margin: 0px auto;
}

将图像设置为您的 li > a

另一个当您希望图像的大小与li 相同时，最好将图像设置为背景，而不是将其显示为li 中的html 元素。

所以你可以应用下面的css，确保我们需要为你的每个li单独设置background-image。并且可以删除img 元素旁边的li a。

.portfolio-list li a
{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 230px;
}

.portfolio-list li a.first
{
  background-image: url('http://corey-dickinson.com/img/arcban2.jpg');
}

.portfolio-list li a.second
{
  background-image: url('http://corey-dickinson.com/img/qcwide.png');
}
...
...
//And so on for other li.

【讨论】：

嘿！我试过第二种方法，但没有奏效。我是否需要将每个 li 项目标记为 first 和 second 等等？
对...实际上，您必须在每个 a 标签上应用该类，例如 first OR second OR third，这样我们才能应用单独的背景图像。

【解决方案3】：

将此添加到您的 CSS 中

.portfolio-list li a {
    text-align: center;
}

【讨论】：