Skip to content

Instantly share code, notes, and snippets.

@agrublev
Created May 8, 2012 22:34
Show Gist options
  • Save agrublev/2639984 to your computer and use it in GitHub Desktop.
Save agrublev/2639984 to your computer and use it in GitHub Desktop.
Untitled
.area {
width: 300px;
height: 300px;
background: url(../images/abe-bg.png) no-repeat;
position: relative;
border:5px solid #000;
}
.bubble {
position: absolute;
left: 0px;
top: 0px;
width:300px;
height: 300px;
border:1px solid #000;
display: table;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="area">
<div class="bubble">
<p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
</div>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment