我正在努力建立我的网站 - 它还有很长的路要走，而且我是新手。我有一个页面，上面有一系列代表我的投资组合的可点击框。但是，我希望在这些框中显示的图像将自己定向到左侧而不是框的中心。有什么建议？
网站问题是：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/[email protected]/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="[email protected]" 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 ©<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>
像这样为标签添加一个类
<img class="center_img" ..... />
然后在你的CSS中有：
img.center_img{
margin: y_margin_values auto;
}
为margin设置两个值将第一个值设置为顶部和底部，将第二个值设置为左侧和右侧。将左右值设置为auto将使<img>在其容器中居中。如果仍然无效，请将其设置为父级<a>或父级<li>' to havewidth：100％'或您想要的任何宽度。
几乎没有可能获得所需结果的方法。让我们讨论一下
将图像拉到中央
这里我们将图像拉到中心，尽管图像大小与现在相同。所以你的li宽度是全宽，但如果图像的尺寸（宽度）较小，则图像将位于中心。
将以下css应用于li内的图像
.portfolio-list li a img
{
display: block;
margin: 0px auto;
}
将图像设置为您的li的背景> a
另外，当你想要像li一样的图像大小时，最好将图像设置为背景而不是在li中将其显示为html元素。
所以你可以应用下面的css，确保我们需要为你的每个background-image单独设置li。并且可以删除你的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.
将其添加到您的CSS中
.portfolio-list li a {
text-align: center;
}