CSS 网格异常对齐答案

【问题标题】：CSS grid unusual alignmentCSS 网格异常对齐
【发布时间】：2021-10-15 15:45:39
【问题描述】：

我正在使用 CSS 网格来布局网页，并且有三个网格 - 页眉、主要内容和页脚。

主内容网格和页脚网格具有相同的属性，但由于某种原因它们彼此不对齐：

顶部的照片应与页脚中的蓝色部分左对齐，但它们显然不是（在 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:dermot@dermotnolan.ie?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 这两个元素没有左对齐的原因。

通常，解决方案很简单，我无法再发现，因此我将不胜感激任何建议。如果需要更多代码，请告诉我。

【问题讨论】：

您的属性无效：text_align 应为 text-align。不确定这是否是转录错误，或者您的实际代码中是否存在该错误。

标签： html css css-grid

【解决方案1】：

您可以尝试的一件事是：右键单击要以不同方式对齐的图像，选择检查元素，然后使用下图中的“选择元素”按钮选择您的图像。然后，您可以检查图像上是否有任何边距、填充或边框。

如果其中一个元素有边距和/或内边距，您可以使用以下 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;

【讨论】：

这很有趣 - 页脚元素有一个边距，但我不知道为什么，因为它没有在 CSS 中的任何地方指定：我有一张图片，但我似乎无法将它放在此评论中
我已添加边距：0；到CSS，但它没有区别......

【解决方案2】：

您认为这是一个简单的拼写错误吗？在 CSS 中，我使用的是“gridconentleft”而不是“gridcontentleft”——缺少 t 会导致所有问题！感谢您的回复。

【讨论】：