分屏中的居中和图像尺寸

问题描述 投票:0回答:1

我正在使用分屏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>

javascript html css bootstrap-4
1个回答
0
投票

将水平边距设置为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>
© www.soinside.com 2019 - 2024. All rights reserved.