centering 相关问题

我正在尝试使用 SVG 将文本居中放置在一个圆圈中。文本的大小将是动态的。我在 Plunker 上的代码：我正在尝试使用 SVG 将文本居中放置在一个圆圈中。文本的大小将是动态的。我在Plunker上的代码： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500"> <g id="UrTavla"> <circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245"> </circle> <text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em"> Look, I’m centered!Look, I’m centered! </text> </g> </svg> 将text-anchor="middle"添加到text元素。笨蛋 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500"> <g id="UrTavla"> <circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245"> </circle> <text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em">Look, I’m centered!Look, I’m centered!</text> </g> </svg> 当您想绘制不以容器为中心的circle时，提出并接受的解决方案无效！仅当 SVG 元素包含以视口为中心的圆时，在 x="50%" 标签上使用 y="50%" text 才有效。如果要绘制 3 个圆，还必须更改 (x,y) 文本坐标，使它们等于 (cx,cy) 圆坐标，如下例所示正如 random 所提议的，我仅在代码片段中为第一个圆圈添加了 alignment-baseline="middle"，因此您可以看到对于 Label 文本现在完全对齐（垂直）。 <svg height="350" width="350"> <circle cx="110" cy="110" r="100" stroke="red" stroke-width="3" fill="none" /> <text x="110" y="110" text-anchor="middle" stroke="red" stroke-width="1px" alignment-baseline="middle" > Label </text> <circle cx="240" cy="110" r="100" stroke="blue" stroke-width="3" fill="none" /> <text x="240" y="110" text-anchor="middle" stroke="blue" stroke-width="1px" > Ticket </text> <circle cx="170" cy="240" r="100" stroke="green" stroke-width="3" fill="none" /> <text x="170" y="240" text-anchor="middle" stroke="green" stroke-width="1px" > Vecto </text> </svg> 只是为了好玩，我用 3 个圆圈来选择每个部分。只需点击它！ function setReadableCode() { var circLabel = document.getElementById('circLabel'); var circTicket = document.getElementById('circTicket'); var circVecto = document.getElementById('circVecto'); var interLabelTicket = document.getElementById('interLabelTicket'); var interTicketVecto = document.getElementById('interTicketVecto'); var interVectoLabel = document.getElementById('interVectoLabel'); var interLabelTicketVecto = document.getElementById('interLabelTicketVecto'); } function clickCircle(sCircle, sInter2a, sInter2b, sInter3) { var circ = document.getElementById(sCircle); var inter2a = document.getElementById(sInter2a); var inter2b = document.getElementById(sInter2b); var inter3 = document.getElementById(sInter3); var sColor = ''; if (circ.style.fill == '' || circ.style.fill == 'white') { sColor = 'yellow'; } else { sColor = 'white'; } circ.style.fill = sColor; inter2a.style.fill = sColor; inter2b.style.fill = sColor; inter3.style.fill = sColor; setReadableCode(); } function clickCircLabel() { clickCircle('circLabel', 'interLabelTicket', 'interVectoLabel', 'interLabelTicketVecto'); } function clickCircTicket() { clickCircle('circTicket', 'interLabelTicket', 'interTicketVecto', 'interLabelTicketVecto'); } function clickCircVecto() { clickCircle('circVecto', 'interVectoLabel', 'interTicketVecto', 'interLabelTicketVecto'); } function clickIntersection2(sInter2, sInter3) { var inter2 = document.getElementById(sInter2); var inter3 = document.getElementById(sInter3); var sColor = ''; if (inter2.style.fill == '' || inter2.style.fill == 'white') { sColor = 'yellow'; } else { sColor = 'white'; } inter2.style.fill = sColor; inter3.style.fill = sColor; setReadableCode(); } function clickInterLabelTicket() { clickIntersection2('interLabelTicket', 'interLabelTicketVecto'); } function clickInterTicketVecto() { clickIntersection2('interTicketVecto', 'interLabelTicketVecto'); } function clickInterVectoLabel() { clickIntersection2('interVectoLabel', 'interLabelTicketVecto'); } function clickInterLabelTicketVecto() { var inter = document.getElementById('interLabelTicketVecto'); var sColor = ''; if (inter.style.fill == '' || inter.style.fill == 'white') { sColor = 'yellow'; } else { sColor = 'white'; } inter.style.fill = sColor; setReadableCode(); } text { font-family:Arial; } <svg height="350" width="350"> <circle id="circLabel" cx="110" cy="110" r="100" stroke="red" stroke-width="0" fill="white" onclick="clickCircLabel();"/> <text x="60" y="110" text-anchor="middle" stroke="red" stroke-width="1px" onclick="clickCircLabel();">Label</text> <circle id="circTicket" cx="210" cy="110" r="100" stroke="blue" stroke-width="0" fill="yellow" onclick="clickCircTicket();"/> <text x="260" y="110" text-anchor="middle" stroke="blue" stroke-width="1px" onclick="clickCircTicket();">Ticket</text> <circle id="circVecto" cx="160" cy="196.602541" r="100" stroke="green" stroke-width="0" fill="white" onclick="clickCircVecto();" /> <text x="160" y="240" text-anchor="middle" stroke="green" stroke-width="1px" onclick="clickCircVecto();">Vecto</text> <path id="interLabelTicket" d="M 160 23.397460 a100,100 0 0,0 0,173.205081 a100,100 0 0,0 0,-173.205081 z" fill="white" stroke-width="3" onclick="clickInterLabelTicket();" /> <path id="interVectoLabel" d="M 60 196.602541 a100,100 0 0,0 150,-86.602540 a100,100 0 0,0 -150,86.602540 z" fill="white" stroke-width="3" onclick="clickInterVectoLabel();" /> <path id="interTicketVecto" d="M 260 196.602541 a100,100 0 0,0 -150,-86.602540 a100,100 0 0,0 150,86.602540 z" fill="white" stroke-width="3" onclick="clickInterTicketVecto();" /> <path id="interLabelTicketVecto" d="M 110 110 a100,100 0 0,1 100,0 a100,100 0 0,1 -50,86.602540 a100,100 0 0,1 -50,-86.602540 z" fill="none" stroke-width="3" onclick="clickInterLabelTicketVecto();" /> <circle cx="110" cy="110" r="100" stroke="red" stroke-width="3" fill="none" /> <circle cx="210" cy="110" r="100" stroke="blue" stroke-width="3" fill="none" /> <circle cx="160" cy="196.602541" r="100" stroke="green" stroke-width="3" fill="none"/> </svg> 也许，也可能有用alignment-baseline="middle"，与text-anchor="middle"： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500"> <g id="UrTavla"> <circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245" />  <text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em" text-anchor="middle" alignment-baseline="middle"> Look, I’m centered!Look, I’m centered! </text> </g> </svg> 这里有一个很好的资源： http://apik.ca/prog_svg_text_style.html 适用于非中心圆圈的更简单的解决方案是将圆圈和文本放在翻译组中。这样你就不需要在文本上重复坐标。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Centered texts</title> </head> <body ng-controller="MainCtrl"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <g transform="translate(300, 300)" > <circle fill="none" stroke="black" stroke-width="1px" r="120"/> <text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I’m centered!</text> </g> <g transform="translate(150, 150)" > <circle fill="none" stroke="black" stroke-width="1px" r="120"/> <text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I’m also centered!</text> </g> </svg> </body> </html> 使用 alignment-baseline="central" 的浏览器之间的行为不一致。值得注意的是，Chrome 会正确定位，但 Firefox 不会。如果您使用dominant-baseline="central"，它将在两者中正确显示。火狐：铬： svg { height:140px } <h4>alignment-baseline AND dominant-baseline settings:</h4> <svg viewBox="0 0 48 48"> <circle stroke="darkgray" stroke-width="1px" fill="lightgray" cx="50%" cy="50%" r="48%"/> <line x1="0" y1="50%" x2="100%" y2="50%" stroke="blue" stroke-width="1"/> <text text-anchor="middle" alignment-baseline="central" x="50%" y="50%">central</text> </svg> <svg viewBox="0 0 48 48"> <circle stroke="darkgray" stroke-width="1px" fill="lightgray" cx="50%" cy="50%" r="48%"/> <line x1="0" y1="50%" x2="100%" y2="50%" stroke="blue" stroke-width="1"/> <text text-anchor="middle" alignment-baseline="middle" x="50%" y="50%">middle</text> </svg> <svg viewBox="0 0 48 48"> <circle stroke="darkgray" stroke-width="1px" fill="lightgray" cx="50%" cy="50%" r="48%"/> <line x1="0" y1="50%" x2="100%" y2="50%" stroke="blue" stroke-width="1"/> <text text-anchor="middle" dominant-baseline="central" x="50%" y="50%">central</text> </svg> <svg viewBox="0 0 48 48"> <circle stroke="darkgray" stroke-width="1px" fill="lightgray" cx="50%" cy="50%" r="48%"/> <line x1="0" y1="50%" x2="100%" y2="50%" stroke="blue" stroke-width="1"/> <text text-anchor="middle" dominant-baseline="middle" x="50%" y="50%">middle</text> </svg> 在 SVG 圆圈中制作文本中心非常容易。 <svg height="300" width="300"> <circle cx="120" cy="120" r="30%" fill="#117da9" /> <text x="50" y="120" fill="white">Center Text in SVG Circle</text> </svg> 您需要做的就是更改标签的 x 和 y 值，直到给定的文本与圆心对齐。例如，这里的 x 和 y 值是 x="50" y="120"

css svg centering

回答 6 投票 0

多行文字不居中

我正在开发我的第一个 flutter 应用程序，试图将文本居中。下面显示了带有简短文本的屏幕，这与预期的一样：如果文本较长并且跨越更多行，则输出 i...

flutter centering

回答 0 投票 0

图形框内的 ZPL 中心图像

我有各种尺寸的标志。我试图将它们放在 ^GB 内的标签上这是可能的还是有另一种方法可以做到这一点？我试过的代码：^FO10,295,2^GB585,90^GFA,{items.manufacturer_...

image centering zpl

回答 1 投票 0

如何围绕中心图像包裹元素

我有一个容器，其中有一个图像需要居中，多个按钮应该环绕在容器周围。向左或向右浮动会给出正确的行为，但目标是......

javascript html css css-float centering

回答 1 投票 0

页面没有按钮居中

我一直在努力，但没有任何效果， https://jsfiddle.net/lucianopinochet/fzse5962/ 如果有人有想法，我会非常感谢你。 .容器文章按钮{ 对齐自我：中心； } 我一直在努力，但没有任何效果， https://jsfiddle.net/lucianopinochet/fzse5962/ 如果有人有想法，我会非常感谢你。 .container article button{ align-self: center; } <div class="container"> <article> <h3>Free</h3> <h4>Forever Free Plan</h4> <p>Our generous free forever plan provides you with plenty to get started and get addicted to the tools that will take your work to the next level. No credit card required to get started.</p> <ul> <li>Unlimited pages & links</li> <li>Up to 5 gigabytes of storage</li> <li>Up to 20 databases</li> <li>Share up to 50 pages via URL</li> <li>Up to two guest users per page</li> </ul> <button>Sign Up Now</button> </article> </div> 试试这个： div{ width:100%; display:flex; align-items:center; justify-content:center; } <div> <button>submit</button> </div> 垂直和水平按钮将通过此代码居中。

html css button center centering

回答 1 投票 0

将导航居中

我希望包含链接的主导航位于电话媒体的中间我使用边距：自动；但这没有用。我在悬停时使用 ::before 来获得一些效果。这是...

html css margin centering auto

回答 0 投票 0

将 DIV 与两侧的内容居中对齐

所以我有 5 个项目（在一个包含的 DIV 中）。项目阵容为：文字图像 DIV 图像文字我希望显示它以便 DIV 居中，图像“拥抱”DIV，然后文本“拥抱”图像，...

html css styles center centering

回答 1 投票 0

如何将图像置于锚元素的中心？ [重复]

此刻，div 元素中的图像使用 flex 和一些 CSS 将它们出售到某种盒子中。同时问题似乎是当我想将图像居中到 CSS 的中心时......