How to center variable length text on an absolutely positioned element in a div?
I know solutions from how to center an absolute positioned element in a div . But my situation is, instead of a fixed length div, I have a variable length text.
I want the div to grow in length with the text while keeping the center. I think I can use js to programmatically change the width, but that sounds too hacky, is there a pure css solution?
Example: http://jsfiddle.net/tling/3KTUM/307/
.outer_div {
background-color: #999;
border: 0px solid black;
width: 300px;
height: 200px;
float: left;
position: relative;
}
.inner_div {
position: absolute;
background-color: #BBB;
width: 100px;
/*adjustable width with text ?*/
height: 50px;
color: black;
margin: 0 auto;
right: 0;
left: 0;
}
<div class="outer_div">
<div class="inner_div">Text Text Text</div>
</div>
source to share
I have not tested it fully in multiple browsers, but you could use the trick left:50%
and transform:translate(-50%)
with margin-right:-50%
. It feels strange to write everything together, but it should cover everything.
.outer_div
{
background-color: #999;
border: 0px solid black;
width: 300px;
height: 200px;
/*float:left; */
position: relative;
}
.inner_div
{
position: absolute;
background-color: #BBB;
display:inline-block;
color:black;
left:50%;
margin-right: -50%;
transform: translateX(-50%);
}
<div class="outer_div" style="" >
<div class="inner_div">Text Length May Change </div>
</div>
<br>
<div class="outer_div" style="" >
<div class="inner_div">Change </div>
</div>
<br>
<div class="outer_div" style="" >
<div class="inner_div">Text Length May Change Text Length May Change </div>
</div>
Tests:
This method works in most modern browsers, at least the latest version. The only notable exception is Safari 8. I think.
https://www.browserstack.com/screenshots/0d780368ad54ecdd31cf5c62e70ff79f2b9a5a11
source to share
Using flexbox will do the trick. I took the liberty of maximizing the width of the inner div to be equal to the outer div.
.outer_div {
background-color: #999;
border: 0px solid black;
width: 300px;
height: 200px;
display: flex;
justify-content: space-around;
align-items: center;
}
.inner_div {
background-color: #BBB;
width: auto;
max-width: 300px;
/*adjustable width with text ?*/
height: 50px;
color: black;
}
<div class="outer_div">
<div class="inner_div">Text Text Text</div>
</div>
source to share
I would use flexbox here as it is the simplest and most flexible option for you. Also, instead of using "width", you might want to use "max-width". This means below a certain point your div will resize the text. Once it reaches your maximum value, it will stop growing and hide the text inside the box.
.outer_div {
background-color: #999;
border: 0px solid black;
width: auto;
max-width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center; /* Vertical alignment, use "flex-start" for top align */
}
.inner_div {
background-color: #BBB;
width: auto;
max-width: 300px; /* Max-width will prevent uncontrolled growth */
height: 50px;
color: black;
}
<div class="outer_div">
<div class="inner_div">Variable text length.</div>
</div>
source to share