如何控制div与SVG位置？SVG对齐文本基线问题求助

你遇到的问题是行内元素默认对齐规则导致的：div设置为inline-block，SVG作为行内元素，默认会基于基线对齐，但因为div有固定高度，视觉上SVG线条会跑到div的中间位置。要让SVG线条精准对齐到文本"Architecture"中大写字母A的底部（也就是文本的基线），可以通过以下步骤调整：

方案一：调整SVG的垂直对齐方式 #

直接给SVG添加vertical-align: baseline样式，让它和div的文本基线对齐，同时微调SVG线条的y坐标匹配文本基线位置：

div { 
  text-align: justify; 
  color: white; 
  font-size: 14px; 
  font-family: 'Muli', sans-serif; 
  border-style: solid; 
  border-color: red; 
  height: 60px; 
  width: 230px; 
  display: inline-block; 
  margin-top: 10px; 
  margin-left: 10px; 
  padding-top: 0px; 
  /* 可选：固定行高，确保文本基线位置稳定 */
  line-height: 14px;
}

<svg height="50" width="200" style="vertical-align: baseline;"> 
  <line x1="50" y1="14" x2="200" y2="14" style="stroke:rgb(255,255,255);stroke-width:2.5"/> 
</svg>
<div>Modern architecture first took off in Europe and then made its way into the American style.</div>

调整说明：

• vertical-align: baseline：强制SVG与div内文本的基线对齐，替代默认的行内元素对齐逻辑。
• 修改SVG线条的y1和y2为14（与font-size一致）：文本基线通常位于字体高度的下方区域，设置为font-size数值可以精准对齐大写字母的底部，你可以根据实际字体微调这个值（比如13或15）。
• 可选的line-height:14px：让div内文本的行高与字体大小一致，避免文本在div内垂直偏移，确保基线位置稳定。

方案二：统一元素的display属性 #

把SVG也设置为inline-block，再通过vertical-align: baseline统一对齐规则，这种方式对齐逻辑更可控：

<svg height="50" width="200" style="display: inline-block; vertical-align: baseline;"> 
  <line x1="50" y1="14" x2="200" y2="14" style="stroke:rgb(255,255,255);stroke-width:2.5"/> 
</svg>

这样SVG和div都是inline-block元素，对齐规则完全一致，不会出现行内元素与inline-block元素的对齐差异。

验证小技巧 #

你可以临时给div加上background: black方便观察，然后微调SVG线条的y坐标，直到线条正好对齐"Architecture"中A的底部。不同字体的基线位置略有差异，所以可能需要小幅度调整y值。

内容的提问来源于stack exchange，提问作者Sepehr