1

在 React JS 的样式化组件中，我以百分比形式给出了 div 的宽度，以使其具有响应性……但是 div 在右侧得到了边距，这使得对齐受到干扰。如何摆脱这个边缘。 这是图像

export const BannerHeaderText = styled.h1`
    width: 46.5%;
    height: 64px; 
    font-size: 28px;
    font-weight: 600;
    line-height: 1.14;
    `
export const BannerParagraph = styled.p`
    width: 51.4%;
    height: 40px;
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
    opacity: 0.38;
    `

我得到了我需要的宽度。

<BannerParagraphBlock>

                <BannerHeaderText>
                    Solveing the most common problems in marketing
                </BannerHeaderText>

                <BannerParagraph>
                    Exquisite codially mr happiness of neglected distrusts.
                    Boisterous impossible unaffected he me everything.
                </BannerParagraph>

                <SeeAllProductsButton>{message.SayEffectHomePageSeeAllProductsButton.value}</SeeAllProductsButton>

            </BannerParagraphBlock>

丢失的数据

BannerHeaderText 是 h1 而 BannerParagraph 是 p BannerParagraphBlock 是节

4

4 回答 4

0

用于flex获得相同的

下面我发布了一个例子

FLEX的更多更新flex 

.wrapper {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}

.wrapper h1 {
  font-size: 19px;
  margin: 10px 0px;
  color: #fff;
  max-width: 352px;
  text-align: center;
}

.wrapper p {
  font-size: 14px;
  color: #f7f7f7;
  max-width: 352px;
  text-align: center;
}

.wrapper button {
  background: #7C6ECC;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  border: none;
  font-size: 14px;
}
<div class="wrapper">
  <h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, rem, neque rerum nemo nam dolor ea nihil
  </p>
  <button>
    See all products
  </button>
</div>

于 2017-06-09T05:52:32.133 回答
0

在 CSS 代码的开头重置<div>标签的边距。然后稍后您可以根据需要提供边距。这是它的样子，

    div{
        margin:0;
        padding:0;
    }

希望这会奏效！

于 2017-06-09T05:19:09.717 回答
0

众所周知。h1 是一个块级元素，所以它会占据最近的块级祖先的空间。对于块级元素，水平方向满足下式：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

默认margin、padding为0，border-style为none，所以border width也为0。因此，当你对h1应用一个特定的宽度时，方程可能不满足。margin-right这种情况在被忽略并被计算以使等式成立时称为“过度约束” 。

If all of the above have a computed value other than 'auto', the values are 
said to be "over-constrained" and one of the used values will have to be 
different from its computed value. If the 'direction' property of the 
containing block has the value 'ltr', the specified value of 'margin-right' 
is ignored and the value is calculated so as to make the equality true. If 
the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

所以，它 h1 是块级元素，没有办法删除右边距；

  1. 如果你只想居中 h1，你可以设置

    h1 { 左边距：自动；边距右：自动；}

根据上面的公式，margin-left 和 margin-right 将被计算为相同的值，因此 h1 可以这样居中；

  1. 如果您想将 h1 定位在任何位置，您可以将 margin-left 或 padding-left 添加到任意值以达到您的目的；

  2. 或者，根据需要，您可以将 h1 从块级更改为内联块，这将真正移动右边距：

h1 {
  display: inline-block;
}
<body>
  <h1>Hello, title!</h1>
  <p>Hello, world!</p>
</body>

于 2017-06-09T07:48:30.437 回答
0

HTML 标题是块级元素。来自MDN

块级元素占据其父元素（容器）的整个空间，从而创建一个“块”。

在您的情况下，您可以这样做以使标题居中对齐

h1.heading {
    margin-right: auto;
    margin-left: auto;
}

您可以在下面的代码片段中看到标题（红色边框）是居中对齐的。 

h1.heading {
  margin-right: auto;
  margin-left: auto;
  border: 1px solid red;
  width: 352px;
}

p {
  color: #777;
}
<h1 class="heading">Solving the most common problems in marketting</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

于 2017-06-09T05:23:10.627 回答