【发布时间】：2017-12-21 18:04:54
【问题描述】：
html {
font-family: "Open Sans", sans-serif;
font-weight: 100;
background-color: #fbfbfb;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 100;
}
body h1 {
font-weight: 100;
}
body h3 {
font-family: "Open Sans", sans-serif;
font-size: 16px;
}
.widget-container {
width: 100%;
position: fixed;
top: 70%;
left: 50%;
transform: translate(-50%, -47%);
}
.widget-title {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
}
.widget-Gtitle {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
font-size: 13px;
}
.kpi-container {
list-style-type: none;
margin: auto;
border-spacing: 10px 1px;
text-align: right;
}
.kpi-entry {
text-align: center;
margin-bottom: 10px;
}
.kpi-value {
font-size: 16px;
text-align: right;
}
.kpi-Gvalue {
font-size: 13px;
text-align: right;
}
.kpi-Glabel {
font-size: 13px;
text-align: right;
}
.kpi-label {
font-size: 16px;
text-align: right;
}
.kpi-icon {
display: inline-block;
width: 13px;
height: 13px;
}
.green {
background: #009c00;
}
.red {
background: #ff0000;
}
.amber {
background: #FFC200;
}
.arrowGreen {
fill: #009c00;
width: 15px;
height: 15px;
}
.arrowRed {
fill: #ff0000;
width: 15px;
height: 15px;
}<html>
<head>
</head>
<ol id="error-list" class="error-list"></ol>
<div id="widget-title" class="widget-Gtitle">EBIT Margin %</div>
<div id="widget-container" class="widget-container">
<table class="kpi-container">
<tbody>
<tr class="kpi-entry">
<td>
<div class="kpi-Glabel">Current</div>
</td>
<td>
<div id="ragCurrentBox"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="kpi-icon arrowGreen">
<g>
<g>
<path id="svgInternalID" d="M446.906,261.969c-1.792-3.656-5.5-5.969-9.573-5.969h-96V10.667C341.333,4.771,336.563,0,330.667,0H181.333 c-5.896,0-10.667,4.771-10.667,10.667V256h-96c-4.073,0-7.781,2.313-9.573,5.969c-1.792,3.646-1.354,8,1.135,11.219 l181.333,234.667c2.021,2.615,5.135,4.146,8.438,4.146s6.417-1.531,8.438-4.146l181.333-234.667 C448.26,269.969,448.698,265.615,446.906,261.969z"></path>
</g>
</g>
</svg></div>
</td>
<td>
<div id="valueCurrent" class="kpi-Gvalue">0.58%</div>
</td>
</tr>
<tr class="kpi-entry">
<td>
<div class="kpi-Glabel">YTD</div>
</td>
<td>
<div id="ragYTDBox"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="kpi-icon arrowGreen">
<g>
<g>
<path id="svgInternalID" d="M446.906,261.969c-1.792-3.656-5.5-5.969-9.573-5.969h-96V10.667C341.333,4.771,336.563,0,330.667,0H181.333 c-5.896,0-10.667,4.771-10.667,10.667V256h-96c-4.073,0-7.781,2.313-9.573,5.969c-1.792,3.646-1.354,8,1.135,11.219 l181.333,234.667c2.021,2.615,5.135,4.146,8.438,4.146s6.417-1.531,8.438-4.146l181.333-234.667 C448.26,269.969,448.698,265.615,446.906,261.969z"></path>
</g>
</g>
</svg></div>
</td>
<td>
<div id="valueYTD" class="kpi-Gvalue">0.57%</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>我在同一页面上遇到了两个 html5 小部件的问题。 正如您在字幕 Current 和 YTD 的两个小部件上看到的那样，对齐已关闭。
任何人都可以对此有所了解，这里是 CSS 规则，它们都是相同的，因为它们来自同一个 css 文件。即使正确的单位长度不同，例如 1 和 £x.xx，我也希望标题和箭头能够完美对齐。
【问题讨论】：
-
始终包含相关信息（在本例中为样式）作为文本。更好的是，对于这样的事情，包含一个 runnable minimal reproducible example 使用 Stack Snippets（
[<>]工具栏按钮）来演示问题。 -
我在图中的 CSS 中看不到任何与小部件中的文本相关的内容。但看起来与它们相关的任何 CSS 都使它们以它们的元素为中心，它们似乎在这两种情况下都是如此。如果没有更多的 CSS，也没有更清楚地了解您想要的最终结果，我们将无法为您提供帮助。
-
@T.J.Crowder 我添加了一个 CSS sn-p 并添加了我想要创建的内容，如果您需要其他内容，请告诉我。谢谢！
-
文本“Current”和“YTD”在所有小部件中是否始终相同？然后您可以删除
transform: translate设置（至少是水平设置）并通过反复试验调整“left设置以找到令人满意的左对齐位置。（左 = 大约 35 - 40%） -
@LaurenBuxton：再次：minimal reproducible example 仔细查看其中的每一个词（尽管我一直认为“可验证”是一个奇怪的选择），并仔细阅读他们链接到的文章。人们会很乐意提供帮助，但你必须完成你的任务。这意味着投入工作以使其最小和完整同时仍然可验证（证明问题）。该过程通常意味着您自己找到解决方案，但如果没有，您可以分享一些合理的东西来获得帮助。
标签： javascript css html alignment