Question

这是我的尝试，但div包装器并不是内容div的中心。我有一个包含ang盒形状的div和另一个带有文本的div。

.wrapper {
  position:absolute;
    left: 50%;
}

.content {
    width:90%;
text-align:justify;
    left: -50%;
    display: inline-block;
}

.button {
text-align:center;
}


<div class="wrapper">

<div name="box" style="background-color:#FF6201;width:220px;height:220px;:30px">
   <div class="content">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,<button class="button">
   weee</button>
</div>

</div>

</div>

我实际上可以通过添加标签来做html，但我希望在css中完成此操作。请帮助。

Answer 1

我一时间发现了这个漂亮的伎俩：

margin-left: 50%;
transform: translate(-50%)

这将使任何静态定位的Div居中。我假设你想让盒子居中;如果是这样的话，我会移动这个类=＆＃34;内容＆＃34;到该元素，然后将您的CSS修改为以下内容：

.content {
 width:90%;
 margin-left: 50%;
 text-align:justify;
 transform: translate(-50%) 
}

这是一个小提琴链接，看看这是不是你想要的：https://jsfiddle.net/e3tsj8qf/5/

修改下面引用的小提琴代码（接受为答案）：

.box { background-color:#FF6201; width:220px; height:220px; } .content { width:90%; text-align:justify; margin-left: 5%; } .centered { text-align:center; } <div class="box" name="box"> <div class="content"> Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, </div> <div class="centered"> <button class="button">weee</button> </div> </div>

Answer 2

尝试使用此代码标记和样式.....

＆＃13;

*{box-sizing:border-box};
*{margin:0;padding:0}
.wrapper {
  position: absolute;
  left: 50%;
  transform:translate(-50%);
}

.content {
  width: 85%;
  text-align: center;
  display: block;
  margin:0 auto;

}

.button {
  text-align: center;
}

＆＃13;

<div class="wrapper">

  <div name="box" style="background-color:#FF6201;width:220px;height:220px;">
    <div class="content">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,<button class="button">
   weee</button>
    </div>

  </div>

</div>

＆＃13;

将div中的所有元素居中，但文本在css中是合理的

2 个答案: