Question

我正在尝试格式化一系列标签和svg元素;但是，我似乎无法正确对齐。我已经搜索了各种css对齐策略，到目前为止空手而归。下面的代码生成一个标签和一个文本在中间的框。我希望标签文本和框中的文本垂直居中于同一条线。目前它们有点偏移。我还注意到两个元素周围的边距不一致（边框和顶部之间的空间小于边框和底部之间的空间），这可能导致一些不对齐。理想情况下，我想消除元素周围的所有边距/填充以及正确居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style>
        h1{
            margin-right: 10px;
            font-size:1.5em;
        }
        #parent{
            border:1px solid black; 
            display: flex; 
            justify-content: left; 
            align-items: center;
        }
        div{
            margin: 0;
            padding: 0;
        }
        svg{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="parent">
        <h1>
            Label
        </h1>
        <div>
            <svg width="50" height="50">
                <g>
                    <rect height="50" width="50" x="0" y="0" fill="#A2E074" rx="5" ry="5"/>
                    <text text-anchor="middle" style="alignment-baseline: central; fill: #666;" x="25" y="25">
                        SVG
                    </text>
                </g>
            </svg>
        </div>
    </div>
</body>
</html>

Answer 1

您可以使用以下内容将svg中的文本居中：

1.将文本的位置设置到要将其居中的元素的绝对中心：如果它是父母，你可以做x =“50％”y =“50％”。如果它是另一个元素，则x将是该元素的x +其宽度的一半（对于y而言类似于高度）。

2.使用text-anchor属性将文本水平居中，其值为middle：

    middle

    The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position.

3.使用alignment-baseline属性将文本垂直居中，值为中间值（或者取决于你想要的样子，你可能想做中心）

示例：

<div id="parent">
        <h1>
            Label
        </h1>
        <div>
            <svg width="300" height="300">
                <g>
                    <rect height="300" width="300"  fill="#A2E074" rx="5" ry="5"/> 
                    <text text-anchor="middle"  style="alignment-baseline: middle; fill: #666;" x="50%" y="50%">
                        SVG
                    </text>
                </g>
            </svg>
        </div>
    </div>

垂直中心文本和SVG元素，无填充和文本对齐

1 个答案: