文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >拆分屏幕中的居中和图像大小

问拆分屏幕中的居中和图像大小
EN

Stack Overflow用户
提问于 2020-05-31 11:14:50
回答 1查看 325关注 0票数 0

我正在做一个使用分屏CSS的项目，我在图像大小和定位方面都有问题。我已经按照W3schools的指示使用了.centered CSS，但它总是偏移“左分裂”右侧的图像和文本。我做错了什么。我正在尝试使图像和伴随的<h2>文本居中。W3schools展示了一个解决方案，我已经研究了几个小时。我是一个编程新手，不知道如何寻找解决方案。欢迎任何建议和建议。

代码语言：javascript
复制
<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/popper.js@1.16.0/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
EN

回答 1

Stack Overflow用户

发布于 2020-05-31 11:41:23

将水平边距设置为auto将为您做一些工作，它需要指定宽度。

​

代码语言：javascript
复制
.split {
  width: 49%;
  height: 400px;
  border: 1px solid #999;
  float: left;
}

.centered {
  background: #ccc;
  width: 80%;
  margin: 10px auto;
}

.centered img {
  width: 100%;
}
代码语言：javascript
复制
<div class="split">
  <div class="centered">
    <img src="https://i.picsum.photos/id/83/200/100.jpg" />
  </div>
</div>
<div class="split">

</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62111108

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档