CSS網格例外對齊

我正在使用 CSS 網格來布局網頁，并且有三個網格 - 頁眉、主要內容和頁腳。

maincontent 網格和頁腳網格具有相同的屬性，但由于某種原因它們彼此不對齊：

頂部的照片應該與頁腳中的藍色部分左對齊，但它們顯然不是（在 Edge 中拍攝的照片，Chrome 和 Firefox 中的結果相同）。

/* PAGE CONTENT LAYOUT */
.gridcontent {
    display: grid;
    grid-template-columns: 5vw 20em 3fr 5vw;
    grid-template-rows: 20em auto; 
    /* align-items: center; */
    background-color: white;
    /* Add margin to space the content from the header */
    margin-top: 2em;
    /* Aligns the cell contents at the top */
    align-self: start;
    border: 0.25em black solid;
}

.gridconentleft {
    grid-column: 2;
}

.gridcontentright {
    grid-column: 3;
}


/* PAGE FOOTER */
.pagefooter{
    display: grid;
    grid-template-columns: 5vw 20em 3fr 5vw;
    grid-template-rows: 7.5em; 
    margin-top: 5em;
    border: 0.25em green solid;
}

.pagefootercopy {
    grid-column: 2;
    background-color: #132257;
    color: white;
    text-align: center;
}

.pagefootercontact {
    grid-column: 3;
    font-size: small;
    text_align: left;
}

<div class="gridcontent">
            <div class="gridcontentleft">
                <img src="images/dermotatflorence.png" alt="Dermot Nolan Master of Wine">
            </div>
            <!-- END CONTENT LEFT -->

            <div class="gridcontentright">
                <h1>Dermot Nolan, Master of Wine</h1>
                <h2>Curriculum Vitae</h2>

                <br>

                <p>
                Hello, my name is Dermot Nolan and this is my online curriculum vitae (CV).
                </p>

                <br>

                <p>
                On these pages I have information about who I am, my education and employment,
                 the hobbies which I enjoy and how to get in touch.
                </p>


            </div>
            <!-- END CONTENT RIGHT  -->

        </div>
        <!-- END CONTENT -->


        <div class="pagefooter">
            <div class="pagefootercopy">
                <h1>&copy; 2021</h1>
                <p>
                Dermot Nolan MW
                </p>
            </div>
            <!-- End COPYRIGHT -->

            <div class="pagefootercontact">
                <br>
                <p>Please, feel free to <em><a href="mailto:[email protected]?subject=Web CV contact">email me</a></em> right now, if you like. </p>
                <p>Have a look at <em><a href="http://www.dermotnolan.ie" title="Go to my website">my website</a></em> if you want. </p>
                <p>Have a look at my <em><a href="https://www.linkedin.com/in/dermot-nolan-mw" title="Go to my LinkedIn">LinkedIn</a></em> page.</p>
            </div>

        </div>
        <!-- END FOOTER -->

沒有使用填充或邊距，我看不出為什么 maincontentleft 和 pagefootercopy 這兩個元素不是左對齊的。

通常，解決方案很簡單，我無法再發現，因此我將不勝感激任何建議。如果需要更多代碼，請告訴我。

uj5u.com熱心網友回復：

您可以嘗試的一件事是：右鍵單擊要以不同方式對齊的影像，選擇“檢查元素”，然后使用下圖中的“選擇元素”按鈕選擇您的影像。然后，您可以檢查影像上是否有任何邊距、填充或邊框。

如果元素之一有邊距和/或填充，您可以使用以下 CSS 訪問和更改邊距：

margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;

填充：

padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

uj5u.com熱心網友回復：

你會相信這是一個簡單的拼寫錯誤 - 在 CSS 中我有“gridconentleft”而不是“gridcontentleft” - 缺少 t 導致了所有問題！感謝您的回復。

標籤：html css css网格

上一篇：如何將子<li>元素添加到<ul>而不洗掉當前子元素

下一篇：我們能否使用BouncyCastle來動態地存盤和使用這5個CRT檔案？