在网格单元格中居中 SVG

Question

我看到了how一个可以将项目放置在网格单元格内，使其出现在任何四个角。总而言之，单元格本身接收样式 position: relative;，每个项目的样式都设置为 position: absolute;、top: 0; 和 left: 0;，酌情替换 top 和 left。

在这里，我想在中间左侧设置三个 SVG 图像的样式， center-center, 和 center-right 网格单元格。

使用以下三种样式

/* center left */
vertical-align: middle;
left: 0;

/* center-center */
text-align: center;
vertical-align: middle;

/* center right */
vertical-align: middle;
right: 0;

无效。为什么？

body { margin: 40px; }
.header {
    grid-area: header;
    height: 100px;
    position: relative;
    background-color: #999;
}
.content {
    grid-area: content;
    height: 200px;
}
.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 800px;
    grid-template-areas:
        "header"
        "content";
    background-color: #fff;
    color: #444;
}
.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 50px;
    font-size: 150%;
}

.centerleft {
    vertical-align: middle;
    left: 0;
}
.centercenter {
    text-align: center;
    vertical-align: middle;
}
.centerright {
    vertical-align: middle;
    right: 0;
}
.circle {
    height: 50px;
    stroke: black; fill: cyan;
}

<div class="wrapper">
    <div class="box header">
        <svg xmlns="http://www.w3.org/2000/svg"
            class="centerleft circle"
            viewBox="0 0 100 100">
            <circle class="mycircle" cx="50" cy="50" r="45"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg"
            class="centercenter circle"
            viewBox="0 0 100 100">
            <circle class="mycircle" cx="50" cy="50" r="45"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg"
            class="centerright circle"
            viewBox="0 0 100 100">
            <circle class="mycircle" cx="50" cy="50" r="45"/>
        </svg>
    </div>
    <div class="box content">
        Content
    </div>
</div>

由于同一个单元格具有三个样式不同的项目，

grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

如所述没有帮助。

Answer 1

这可以通过使用 flex 轻松实现。为框选择器添加了样式

body { margin: 40px; }
.header {
    grid-area: header;
    height: 100px;
    position: relative;
    background-color: #999;
}
.content {
    grid-area: content;
    height: 200px;
}
.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 800px;
    grid-template-areas:
        "header"
        "content";
    background-color: #fff;
    color: #444;
}
.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 50px;
    font-size: 150%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.centerleft {
    vertical-align: middle;
    left: 0;
}
.centercenter {
    text-align: center;
    vertical-align: middle;
}
.centerright {
    vertical-align: middle;
    right: 0;
}
.circle {
    height: 50px;
    stroke: black; fill: cyan;
}

<div class="wrapper">
    <div class="box header">
        <svg xmlns="http://www.w3.org/2000/svg"
            class="centerleft circle"
            viewBox="0 0 100 100">
            <circle class="mycircle" cx="50" cy="50" r="45"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg"
            class="centercenter circle"
            viewBox="0 0 100 100">
            <circle class="mycircle" cx="50" cy="50" r="45"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg"
            class="centerright circle"
            viewBox="0 0 100 100">
            <circle class="mycircle" cx="50" cy="50" r="45"/>
        </svg>
    </div>
    <div class="box content">
        Content
    </div>
</div>

在网格单元格中居中 SVG

Centering SVGs in a grid cell

html

css

centering

css-grid