时间戳

首页 > 解决方案 > 需要删除 React-Bootstrap 列内的两个元素之间的空间

css - 需要删除 React-Bootstrap 列内的两个元素之间的空间

问题描述

我有一个 SVG 和一个<p>元素，它们都包装在一个锚标记内。

SVG 和元素周围的锚点<p>都位于容器内。

我有容器元素的样式以及将<p>它们彼此相邻放置并居中于作为 React-Bootstrap 列的父元素的中间的元素。

现在 SVG 直接位于<p>元素的顶部，如果我移除锚标记元素，SVG 和元素之间会有很大的间隙，<p>但是它们位于同一条线上并正确对齐。

我有下面的 React HTML 和相应的样式。关于如何让这些正确排列的任何想法？

HTML

<Col>
  <ClipboardContainer>
    <a href={url}>
      <ClipboardSvgLarge /><p>view order status ></p>
    </a>
  </ClipboardContainer> 
</Col>

Styled Components CSS

const ClipboardContainer = styled('div')((props) => ({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  marginTop: '10%',
  p: {
    margin: '0 auto',
    color: props.theme.colors.blueAlt,
    textTransform: 'uppercase',
    fontSize: '.75em',
    fontWeight: 600
  }
}))

标签： cssreact-bootstrapstyled-components

解决方案

推荐阅读