我怎樣才能在這個 div 中居中這個圖像？

Question

如何以不會移動“line”div的方式將我在這個div中的這個圖像居中？ 我希望這條線也能接觸到正方形的頂部。

 .black { background: black; } .square { width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; } .image { height: 60px; width: 60px; } .line { width: 4px; height: 500px; background-color: red; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> <div class="wrapper"> <div class="line"></div> <div class="rectangle"></div> </div> </div>

Answer 1

這是防止它破壞容器的流布局的一種方法：

您可以將容器設置為相對位置，將圖像設置為絕對位置，從頂部和左側定位 50%，然后對其進行變換，使圖像的中心位於中心位置。

您也可以只使圖像成為 div 的背景圖像，而不是使用圖像元素，這可能更容易操作。

 .black { background: black; } .square { position: relative; width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; } .image { height: 60px; width: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .line { width: 4px; height: 500px; background-color: red; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> <div class="wrapper"> <div class="line"></div> <div class="rectangle"></div> </div> </div> </div>

Answer 2

我不確定我是否了解您所期望的最終目標。 但是，如果我理解正確，您可以創建一個 flex 父級來證明圖像的合理性，然后將線絕對定位在其中。 看 -

 .black { background: black; } .square { width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; } .image { height: 60px; width: 60px; } .line { width: 4px; background-color: red; position: absolute; left: 0; top: 0; bottom: 0 }

 <div class="square black"> <div class="line"></div> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> </div>

Answer 3

您可以將這些 css 用於 .square 和 .image

        .square {
            width: 200px;
            height: 500px;
            margin: 37px auto;
            border-radius: 2px;

            position: relative;
        }

        .image {
            height: 60px;
            width: 60px;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

Answer 4

您可以使用 CSS 絕對位置輕松居中圖像。 通過將方形黑色類的位置設置為“絕對”並應用於屬性“頂部：45%；” 和“左：47%”。 通過應用這個，你的問題肯定會得到解決。

 .black { background: black; } .square { display: flex; align-item: center; justify-content: center; width: 200px; height: 500px; border-radius: 2px; } .image { height: 60px; width: 60px; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> </div> </div>

 .black { background: black; } .square { position: absolute; top: 45%; left: 47%; width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; } .image { height: 60px; width: 60px; position: absolute; top:50%; left:50%; } .line { width: 4px; height: 500px; background-color: red; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> <div class="wrapper"> <div class="line"></div> <div class="rectangle"></div> </div> </div>

 .black { background: black; } .square { width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; } .image { height: 60px; width: 60px; } .line { width: 4px; height: 500px; background-color: red; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> <div class="wrapper"> <div class="line"></div> <div class="rectangle"></div> </div> </div>