Horizontally Center a Div except Text Inside

Question

How can I achieve the style below:

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

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

could you please give us the code that you tried? a jsfiddle/plnkr perhaps? — kukkuz, Aug 02 '16 at 16:10
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Aug 02 '16 at 16:14
@DaniSpringer [comments accept markdown](http://blog.stackoverflow.com/2010/01/new-improved-comments-with-reply/) — chazsolo, Aug 02 '16 at 16:29
@chazsolo I have reason to believe that comment wasn't manually written. — , Aug 02 '16 at 16:30
@DaniSpringer Never asked Paulie_D but it's easy to have something written out that you can copy/paste into a comment block if you run into questions that need some quality remediation, but I do see what you are getting at — chazsolo, Aug 02 '16 at 16:32
@DaniSpringer - As far as I know, the only auto-generated comments are the ones for duplicates that state, *Possible duplicate of [link]*. The text Paulie used is similar to the close reason for debugging questions but none of the existing help/close reasons explicitly request Stack Snippets, so that's their text. (There are some short hand links for comments though: http://stackoverflow.com/editing-help#comment-formatting ) — BSMP, Aug 02 '16 at 16:45
@DaniSpringer - The auto-generated comments for duplicates happens when you flag something as a dupe if: You don't already have a comment with a link to the dupe on the question and no one else has already flagged it as a duplicate. If there's already a comment about the dupe, flagging the question just votes the comment up. There's probably a post on [meta] about this. — BSMP, Aug 02 '16 at 16:48
@DaniSpringer I use a Chrome Extension for Stack Overflow Auto Comments - http://stackapps.com/questions/2116/autoreviewcomments-pro-forma-comments-for-se — Paulie_D, Aug 02 '16 at 17:37

score 0 · Accepted Answer · 2016-08-02T16:39:21.553

0

.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>

edited Aug 02 '16 at 16:39

answered Aug 02 '16 at 16:30

score 0 · Answer 2 · answered Aug 02 '16 at 16:37

Start with this HTML:

<div class="outer">
    <div class="inner">Test</div>
</div>

Then apply these CSS styles:

.outer {
    height: 100px;
    width: 200px;
    background-color: green;
    display: flex;
    align-items: center;
}

.inner {
    height: 50px;
    line-height: 50px;
    width: 100px;
    background-color: blue;
    color: white;
    margin: auto;
}

The sizing and coloring styles should be obvious, and you can make them any size and color you want. The other styles are what you use to get the positioning you're looking for, and I'll explain them.

display: flex;
align-items: center;

(This won't work on older browsers. I'll leave you to research that if you need to.) These two center the inner box in the outer one along the Y-axis (vertical).

margin: auto;

This centers the inner box in the outer one along the X-axis.

line-height: 50px;

This value needs to be the same as the height value for the inner box, if you want the text to be vertically centered in the inner box.

Horizontally Center a Div except Text Inside

2 Answers2