如何使用中心DIV移除宽度

Question

HTML <div align="center">已过期，我转而使用CSS

.center 
{
  margin:0 auto;
  width : 70%;
}

<div class="center">
  This is some text!
</div>

我遇到了width属性问题。我希望这个div自动适合此div中的内容但是width : 70%;它不适合但是当我删除width属性时所以这个div不是页面的中心。

我想要这个：http://i.stack.imgur.com/puYi0.jpg

怎么做？

Answer 1

只需删除width媒体资源，然后将text-align:center添加到.center元素

.center 
{
  text-align:center;
}

<div class="center">
  This is some text!
</div>

Answer 2

＆＃13;

＆＃13;

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="center">This is in the center of the screen</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您想根据内容使用width，可以使用display:inline-block并将css设为父text-align:center，这将与element {{1}对齐}

＆＃13;

＆＃13;

center

＆＃13;

.parent {
  text-align: center;
}
.center {
  display: inline-block;
  border: 1px solid red;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

.center 
{
  margin: 0 auto;
  width : 70%;
  text-align: center;
}

＆＃13;

<div class="center" style="border: 1px solid red;">
  This is some text!
</div>

＆＃13;

＆＃13;

＆＃13;

我为你添加了一个红色边框来确认结果 1.宽度= 70％
2.内部文字对齐中心