如何保持对象与中心对齐文本对齐

Question

有没有办法确保标题上方的突出显示栏始终与第一个单词的开头保持对齐。当标题的文本左对齐时它可以工作，但在这种情况下，设计需要使文本居中对齐。当屏幕缩小时，文本会移动，并且栏保持在原来的位置，它应该始终跟随文本。

让它具有响应能力是我的要求之一。

我尝试过将栏与第一个单词绑定在一起，但在大多数情况下，这会导致标题无法正确显示并且无法以正确的方式响应，我尝试将其相对/绝对定位并将其向左移动一个百分比但它大多保持在原位，当文本移动时，栏不会移动。

注意这个项目正在使用 React、MUI。

要重新创建的标记：

<Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          alignSelf: 'center',
          position: 'relative',
          width: { xs: '90%', lg: '50%' },
        }}
      >
        <Box
          sx={{
            textAlign: { xs: 'start', lg: 'center' },
          }}
        >
          <Box>
            <Box
              sx={{
                alignSelf: 'flex-start',
                ml: {
                  xs: 0,
                  lg: data?.divider_position
                    ? `${data?.divider_position}%`
                    : '3.5%',
                },
              }}
            >
              {dividertype === 'Image' ? (
                <Divider
                  backgroundImage={dividerimage}
                  height="4px"
                  width="63px"
                />
              ) : (
                <Divider
                  backgroundColor={dividercolor}
                  height="4px"
                  width="63px"
                />
              )}
            </Box>
            <TypographyBlock
              headerChildren={data?.section_title}
              headerColor="#00305E"
              headerFontWeight={700}
              headerVariant="h4"
              headerFontFamily="Raleway"
              split={data?.title_split}
            />
          </Box>

          <TypographyBlock
            headerChildren={data?.section_sub_title}
            headerColor="#14819E"
            headerFontWeight={700}
            headerVariant="h6"
            headerFontFamily="Raleway"
          />

          <Typography fontFamily="Roboto" fontSize="16px">
            {
              <div
                dangerouslySetInnerHTML={{
                  __html: data?.section_paragraph,
                }}
              />
            }
          </Typography>
        </Box>
</Box>

Answer 1

是的，您可以通过使用相对位置将元素（例如

<span>

）中的第一个单词包裹起来，并使用

absolute

位置将另一个元素包裹在其中，从而将元素与居中文本的第一个单词对齐。

这是 Codepen 中的示例 https://codepen.io/potench/pen/GgKdzow 下面

<style>
.main {
  justify-content: center;
  display: flex;
}

header {
  width: 300px;
  display: flex;
  text-align: center;
  padding: 10px;
}

.first-word {
  border:1px solid red;
  position: relative;
}

 .first-word:before {
   content: "";
   border: 2px solid blue;
   height: 0px;
   width: 100px;
   position: absolute;
}
</style>

<div class="main">
  <header>
    <h1>
      <span class="first-word">Some</span> centered header that is very long
    </h1>
  </header>
<div>