我正在使用分屏CSS进行项目,并且Im在图像大小和位置上均遇到问题。我已经按照W3schools的指示使用了.centered CSS,但是它始终将图像和文本偏移到“左拆分”的右侧。我究竟做错了什么。我正在尝试将图像和伴随的文本居中。 W3schools显示了一种解决方案,我已经解决了几个小时。我是编码的新手,不确定要如何寻找解决方案。任何建议和指示都将受到欢迎。
<body>
<!-- left side -->
<div class="split left">
<div class="centered">
<img src="images/stufgreenthumb500.png" alt="stuf logo">
<h2 style="text-align: center;">Bid on items to support local & National Organizations</h2>
</div>
</div>
<!-- right side -->
<div class="split right">
<h3 style="text-align: center;">Bid on these Items</h3>
<div class="container">
<div class="row row-content">
<!-- Card 1 -->
<div class="col-md-4 d-flex">
<div class="card-body">
<dl class="row">
<h6>Star Wars Script</h6>
<img src="images/starwarsscript.jpg" class="img-thumbnail mx-auto" alt="star wars script">
<dt class="col-8">Value:</dt>
<dd class="col-4">$15,000</dd>
<dt class="col-8">Donor:</dt>
<dd class="col-4">George Lucas</dd>
<dt class="col-8">Opening Bid:</dt>
<dd class="col-4">$10,000</dd>
<dt class="col-8">Bid Increment:</dt>
<dd class="col-4">$1,000</dd>
<dt class="col-8">Supporting:</dt>
<dd class="col-4">Feeding America</dd>
<div class="card-footer-fluid mx mx-auto">
<button type="button" class="btn btn-success">Bid</button>
</div>
</dl>
</div>
</div>
<!-- Card 2 -->
<div class="col-md-4 d-flex" class="card">
<div class="card-body">
<dl class="row">
<h6>Signed Air Jordans</h6>
<img src="images/jordanshoes.jpg" class="img-thumbnail mx-auto" alt="air jordans">
<dt class="col-8">Value:</dt>
<dd class="col-4">$10,000</dd>
<dt class="col-8">Donor:</dt>
<dd class="col-4">Michael Jordan</dd>
<dt class="col-8">Opening Bid:</dt>
<dd class="col-4">$3,000</dd>
<dt class="col-8">Bid Increment:</dt>
<dd class="col-4">$500</dd>
<dt class="col-8">Supporting:</dt>
<dd class="col-4">Americans Thrive</dd>
<div class="card-footer-fluid mx mx-auto">
<button type="button" class="btn btn-success">Bid</button>
</div>
</dl>
</div>
</div>
<!-- Card 3 -->
<div class="col-md-4 d-flex" class="card">
<div class="card-body">
<dl class="row">
<h6>Tiger's Sunday Jersey</h6>
<img src="images/woodsjersey.jpeg" class="img-thumbnail mx-auto" alt="Tiger Woods Polo">
<dt class="col-8">Value:</dt>
<dd class="col-4">$1,000</dd>
<dt class="col-8">Donor:</dt>
<dd class="col-4">Tiger Woods</dd>
<dt class="col-8">Opening Bid:</dt>
<dd class="col-4">$500</dd>
<dt class="col-8">Bid Increment:</dt>
<dd class="col-4">$100</dd>
<dt class="col-8">Supporting:</dt>
<dd class="col-4">Salvation Army America</dd>
<div class="card-footer-fluid mx mx-auto">
<button type="button" class="btn btn-success">Bid</button>
</div>
</dl>
</div>
</div>
<!-- Card 4 -->
<div class="col-md-4" class="card">
<div class="card-body">
<dl class="row">
<h6>Lakers-Celtics Floor Seats</h6>
<img src="images/floortickets.jpg" class="img-thumbnail mx-auto" alt="lakers floor tickets">
<dt class="col-8">Value:</dt>
<dd class="col-4">$1,000</dd>
<dt class="col-8">Donor:</dt>
<dd class="col-4">The LA Lakers</dd>
<dt class="col-8">Opening Bid:</dt>
<dd class="col-4">$300</dd>
<dt class="col-8">Bid Increment:</dt>
<dd class="col-4">$100</dd>
<dt class="col-8">Supporting:</dt>
<dd class="col-4">Operation Hope</dd>
<div class="card-footer-fluid mx mx-auto">
<button type="button" class="btn btn-success">Bid</button>
</div>
</dl>
</div>
</div>
<!-- Card 5 -->
<div class="col-md-4" class="card">
<div class="card-body">
<dl class="row">
<h6>Signed Joshua Tree</h6>
<img src="images/u2.jpg" class="img-thumbnail mx-auto" alt="lakers floor tickets">
<dt class="col-6">Value:</dt>
<dd class="col-6">$1,000</dd>
<dt class="col-6">Donor:</dt>
<dd class="col-6">Bono/U2</dd>
<dt class="col-6">Opening Bid:</dt>
<dd class="col-6">$300</dd>
<dt class="col-6">Bid Increment:</dt>
<dd class="col-6">$100</dd>
<dt class="col-6">Supporting:</dt>
<dd class="col-6">Operation Hope</dd>
<div class="card-footer-fluid mx mx-auto">
<button type="button" class="btn btn-success">Bid</button>
</div>
</dl>
</div>
</div>
<!-- Card 6 -->
<div class="col-md-4" class="card">
<div class="card-body">
<dl class="row">
<h6>Signed Chipper Jones Bat</h6>
<img src="images/jones.jpg" class="img-thumbnail mx-auto" alt="lakers floor tickets">
<dt class="col-8">Value:</dt>
<dd class="col-4">$500</dd>
<dt class="col-8">Donor:</dt>
<dd class="col-4">Chipper Jones</dd>
<dt class="col-8">Opening Bid:</dt>
<dd class="col-4">$100</dd>
<dt class="col-8">Bid Increment:</dt>
<dd class="col-4">$50</dd>
<dt class="col-8">Supporting:</dt>
<dd class="col-4">Bread For Tomorrow</dd>
<div class="card-footer-fluid mx mx-auto">
<button type="button" class="btn btn-success">Bid</button>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
将水平边距设置为auto
将为您提供帮助,它需要指定宽度。
.split {
width: 49%;
height: 400px;
border: 1px solid #999;
float: left;
}
.centered {
background: #ccc;
width: 80%;
margin: 10px auto;
}
.centered img {
width: 100%;
}
<div class="split">
<div class="centered">
<img src="https://i.picsum.photos/id/83/200/100.jpg" />
</div>
</div>
<div class="split">
</div>