文章/答案/技术大牛

发布

社区首页 >问答首页 >使用绝对图像时的网格对齐(引导)

问使用绝对图像时的网格对齐(引导)
EN

Stack Overflow用户

提问于 2022-08-24 21:02:18

回答 1查看 21关注 0票数 2

我是新的编码在一般和这个网站新的，如果我做了任何错误的对不起。我想创建一个类似picrew的网站，但遇到了一个问题。我想让它对齐，这样字符就在顶部，选择其他选项的按钮在底部：图像链接

但是现在，如果我说实话的话，整个组合充其量就是摇摇欲坠，而且是灾难性的。我很确定这是因为相对和绝对的位置，但这是唯一的方法，我发现如何添加图片之上的相互(比如，把眼睛放在头部)。

<body>
        <div class="container ">
            <div class="row">
              <div class="col">
                <div class="navbar">
                    navbar soon to be
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="img-display position-relative">
                    <img class="body-part position-absolute" id="body-section" src="/testImage/body_default.png"  alt="Default Body" width=400px;/>
                    <img class="head-part position-absolute" id="head-section" src="/testImage/head_default.png"  alt="Default Head" width=400px;/>
                    <img class="ears-part position-absolute" id="ears-section" src="/testImage/ears_default1.png"  alt="Default Ears" width=400px;/>
                    <img class="eyes-part position-absolute" id="eyes-section" src="/testImage/eyes_default.png" alt="Default Eyes" width=400px;/>
                    <img class="mouth-part position-absolute" id="mouth-section" src="/testImage/mouth_default.png" alt="Default Mouth" width=400px;/>
                    <img class="nose-part position-absolute" id="nose-section" src="/testImage/nose_default.png" alt="Default Nose" width=400px;/>
                    <img class="eyebrows-part position-absolute" id="eyebrows-section" src="/testImage/eyebrows_default.png" alt="Default Eyebrows" width=400px;/>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="options-menu">
                    <ul class="test1">
                        <li class="test">X-Type</li>
                        <li class="test">X-Type</li>
                        <li class="test">X-Type</li>
                        <li class="test">X-Type</li>
                    </ul>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="options">
                    <ul class="test1">
                        <li class="test"><button onclick="changeImage('/testImage/ears_default1.png')"><img src="/testImage/ears_default1.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default2.png')"><img src="/testImage/ears_default2.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default3.png')"><img src="/testImage/ears_default3.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default4.png')"><img src="/testImage/ears_default4.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default5.png')"><img src="/testImage/ears_default5.png" width="108px" height="192px"/></button></li>
                    </ul>
                </div>
              </div>
            </div>
          </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script src="script.js"></script>
    </body>

html

css

layout

alignment

bootstrap-5

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-25 00:28:56

管理具有绝对位置元素的复杂布局是可能的，但很棘手。考虑使用display: grid (方便的参考资料)！

布局你的网格区域，因为你希望你的面部特征出现(眼睛，鼻子，耳朵，嘴巴，什么-有-你)。您可以将它们限制到固定的宽度和高度，并按您认为合适的方式使用内部内容对齐。如果身体部分占用了多个网格区域，那么您可能需要聪明地使用grid-template-areas属性。您仍然可以在网格区域内使用position: absolute。

下面是一个小演示，我用一张非常不鼓舞人心的脸做了个小演示：

.container {
  padding: 2rem 0;
}

.head {
  border: 1px solid black;
  border-radius: 50%;
  display: grid;
  grid-template-areas:
    "left-eye right-eye"
    "nose nose"
    "mouth mouth";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  padding: 1rem;
  width: 100px;
  height: 100px;
}

/* Use display: flex; to vertically and horizontally 
   center elements within the grid areas */
.body-part {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-eye {
  grid-area: left-eye;
}

.right-eye {
  grid-area: right-eye;
}

.nose {
  grid-area: nose;
}

.mouth {
  grid-area: mouth;
}

<div class="container">
  <div class="head">
    <div class="body-part left-eye">0</div>
    <div class="body-part right-eye">0</div>
    <div class="body-part nose">|</div>
    <div class="body-part mouth">______</div>
  </div>
</div>
<div class="container">
  Controls, etc. here
</div>

票数 1

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

原文链接：

https://stackoverflow.com/questions/73479432

复制

相似问题

问使用绝对图像时的网格对齐(引导)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用绝对图像时的网格对齐(引导)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用绝对图像时的网格对齐(引导)
EN