我正在建立我的网站-它还有很长的路要走，我是新来的。我的页面上有一系列代表我的投资组合的可点击框。但是，我想在这些框中显示的图像的方向是左侧而不是框的中心。有什么建议吗？
问题所在的网站：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 ©<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>
答案 0 :(得分：0)
为标签添加类
<img class="center_img" ..... />
然后在您的CSS中有：
img.center_img{
margin: y_margin_values auto;
}
为margin设置两个值会将第一个值设置为顶部和底部，第二个值设置为左侧和右侧。将左右值设置为auto将<img>置于其容器的中心。如果仍然不起作用，请设置其父级<a>或父级<li>' to have的宽度：100％'或您想要的任何宽度。
答案 1 :(得分：0)
获得期望结果的方法很少。让我们讨论其中的几个
将图像拉到中心
在这里，我们将图像拉到中心，尽管图像大小将与现在相同。因此您的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.
答案 2 :(得分：0)
将此添加到CSS
.portfolio-list li a {
text-align: center;
}