thousight thousight - 4 months ago 8
CSS Question

Horizontally Center a Div except Text Inside

How can I achieve the style below:

********************
* *
* ******** *
* *Text * *
* ******** *
* *
********************


Where the inner box is centered, but the text inside is not.

Answer

.container {
  text-align: center;
  width: 50%;
  height: 25%;
  background-color: #00aaff;
  padding: 20px;
}
.box {
  text-align: left;
  width: 35%;
  height: 50%;
  background-color: #00aa00;
  margin: 0 auto;
}
<div class="container">
      <div class="box">
        Text
      </div>
    </div>