Keeping text snippet central within a box

Question

I am making a dynamic slide show.

I am trying to get some text that I assign dynamically to align itself centrally and vertically within a box.

So far, I have:

HTML

  <body>
  <div class="slide">
    <span class="content">
       <b>Hello. This text needs to be:</b><br><br> 
       - left-aligned but <br>
       - centered in the grey box<br> 
       - even if it changes<br>
       - the center of the white box <br> 
         should equal center of grey one.
    </span>
  </div>  
  </body>

CSS

.slide {
  position:relative;
  background-color: #ddd;
  width: 300px;
  height: 300px
}

.content {
  position: absolute;
  top: 30%;
  left: 15%;
  background-color: #fff;
}

OUTPUT

Output

This doesn't work because if the text changes, it will no longer be central. Anyone have any ideas how to fix this?

http://jsbin.com/uyiFiwI/23/edit

Hi why don't you use `overflow: scroll;` property. If you don't want that, then you might consider using `font-size: .8em;`! But the first option is better. Second one might be stupid. — Afzaal Ahmad Zeeshan, Aug 18 '13 at 06:15
Yes the slide is always 300 x 300. Was hoping that if there is only a small amount of text, that it go slap bang in the middle. Thanks for answers below. While very close, they aren't quite there. — Sean McClory, Aug 18 '13 at 07:00

David-SkyMesh · Accepted Answer · 2013-08-18T07:13:40.043

3

This does what you want, but relies on display: table-cell which isn't supported by older browsers.

.slide {
  position:relative;
  background-color: #ddd;
  display: table-cell;
  width: 300px;
  height: 300px;
  text-align: center; 
  vertical-align: middle;
}

.content {
  background-color: #fff;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

I don't think there is a solution for older browsers that doesn't change the HTML.

EDIT: you don't need a fixed height for .content

EDIT: removed border: 1px solid gray used for debugging.

EDIT: changed as per @Shomz suggestion (with new, different criteria for .content width).

edited Aug 18 '13 at 07:13

answered Aug 18 '13 at 06:14

David-SkyMesh

5,041
1
31
38

Thanks. While your solution centres perfectly vertically. If there is only a small amount of text, it will be off to one side. i.e the width of the white box should be the size of the inside text. http://jsbin.com/uyiFiwI/42/edit - It would be great to somehow combine the two answers. – Sean McClory Aug 18 '13 at 07:06
2

You can combine them, add `display: inline-block; width: auto;` to the content element.http://jsbin.com/uyiFiwI/43/edit – Shomz Aug 18 '13 at 07:10
Yes. Shomz. That does exactly what I wanted with CSS. Albeit perhaps not that browser friendly. – Sean McClory Aug 18 '13 at 07:20

score 1 · Answer 2 · answered Aug 18 '13 at 06:19

1

If you don't mind about the slide height, something like this will work perfectly in every occasion:

div.slide {
  position:relative;
  background-color: #ddd;
  text-align: center;
}

div.content {
  text-align: left;
  position: relative;
  display: inline-block;
  margin: 10% auto;
  background-color: #fff;
}

http://jsbin.com/uyiFiwI/28/edit

However, if your .slide div needs to have fixed height, you might need to use JavaScript to properly calculate the rendered height of the content div, or use hacky CSS which might or might not work in all browsers, as @David suggested.

answered Aug 18 '13 at 06:19

Shomz

37,421
4
57
85

Thanks. The slide height is fixed unfortunately, but I can control the amount of text on the slide. I like the way your solution centres the text horizontally, but if there is only one line and the height is fixed it no longer works (as you have said). – Sean McClory Aug 18 '13 at 07:03
Yeah, those things can be a pain, pushing CSS to the limits. Personally, I'd add a line of JavaScript and never worry again. :) – Shomz Aug 18 '13 at 07:07
Accepted - http://jsbin.com/uyiFiwI/43/edit – Sean McClory Aug 18 '13 at 07:21
Regarding `display: table-cell;` support. It looks good for all but IE7. http://www.browsersupport.net/CSS/display%3Atable-cell – Sean McClory Aug 18 '13 at 07:33
You should probably accept David's answer then. – Shomz Aug 18 '13 at 07:36

dc5 · Answer 3 · 2013-08-18T07:09:25.197

If you are willing to change your markup a bit, using a list can help you clean up some of the line breaks and spacing issues.

Combining this with display: table-cell as @David-SkyMesh did in his answer will give you a list that is a bit more easily manageable.

HTML

  <div class="slide">
    <div class="content">
      <b>Hello. This text needs to be:</b>
      <ul>
        <li>left-aligned but</li>
        <li>centered in the grey box</li> 
        <li>even if it changes</li>
        <li>the center of the white box this this is really long text not the gray one should equal center of grey one.</li>
      </ul>
    </div>
  </div>

CSS

.slide {
  position:relative;
  background-color: #ddd;
  width: 300px;
  height: 300px;
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.content > ul > li:nth-child(1) {
  margin-top: 10px;
}

.content {
  display: block;
  margin: auto;
  background-color: #fff;
  text-align: left;
}

.content ul {
  margin: 0;
  padding: 0;
  padding-left: 20px;
}

Demo - jsBin

Needed to do it without lists, but with lists this solution also definitely works. — Sean McClory, Aug 18 '13 at 07:26

Keeping text snippet central within a box

3 Answers3