Question

我有这个带边框的框：

.box {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 2px ridge white;
  border: 2px ridge rgb(50, 50, 50);
  border-radius: 1em;
  /*8px*/
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  padding-bottom: 5%;
}

<div class="box">Hello World!</div>

如果将宽度更改为较小的百分比（例如，宽度：90％），则右边缘向左移动，但左边缘不移动，并且文本边距也向内移动。我希望两个边缘都移动-左边缘向右移动的量应与右边缘向左移动的量相同-我完全不希望框内的文本边距移动。

如何执行带边框的框描述的内容？

Answer 1

如果您将宽度缩小10％，只需添加margin-left：5％；比这更好的是：

.box {
     position:absolute;
     width: 90%;
     left:50%; 
     margin-left:-45%; /*this must be always 1/2 of the width and negative*/ 
     height: 100%; 
     padding: 10px; 
     border: 2px ridge white; 
     border: 2px ridge rgb(50, 50, 50);
     border-radius: 1em; 
    /*8px*/ padding-left: 15%; 
    padding-right: 15%; 
    padding-top: 5%; 
    padding-bottom: 5%; 
 }

这样，div将始终相对于其父元素居中。希望对您有所帮助。

Answer 2

我认为我不太了解您，但是这里有两种解决方案。

解决方案1：

您可以使用margin，但您将必须指定宽度。

.box {
  width: 50%; /** setting a width is required **/
  margin: auto;
  border: 2px ridge rgb(50, 50, 50);
  border-radius: 1em;
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  padding-bottom: 5%;
}

<div class="box">Hello World!</div>

解决方案2：

您可以在transform函数的帮助下使用translate3d属性。您不必指定宽度。例如，您可以将display声明为inline-block，以使宽度成为内容的原始宽度。

您可以只使用translateX函数而不是translate3d，它应该以相同的方式工作。另外，设置width将得到相同的结果。

.box {
  /** no width is specified but you can set one **/
  display: inline-block; /** the width now equals the content width **/
  position: relative; /** required to use left property **/
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  border: 2px ridge rgb(50, 50, 50);
  border-radius: 1em;
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  padding-bottom: 5%;
}

<div class="box">Hello World!</div>

希望我进一步推动了你。

Answer 3

我尝试将margin: 0 auto;设置为.box类，如lucifer63所说，它适用于相等的外部边界。以及您不希望框内的文本边距不移动的方式，请设置修订填充padding: 32px的方式。您也可以使用 display: flex; align-itens: center; justify-content: flex-start;并在.box上放置一个高度

如何在不更改文本的情况下缩进边框的两侧

3 个答案: