Question

This is demo: Demo
The demo will work only on webkit browsers, (chrome or safari)

There are four box, each have a title. When users clicks to expand the div. The div is made to expand. Initially the title is in left, but when the div is expanded the title must move to center with animation.I have made the div to align center using padding, but there is a problem, that for varying text-width the padding has to be changed to make the title properly centered. Please take a look at the code, you will understand it better

Answer 1

Remove the padding, center the title on the h3 and try to animate the width of the title between auto and 100%; Use the nowrap to make sure the title stays on one line.

h3 {
  text-align: center;
  width: auto;
  white-space: nowrap;
  ...
}

Then animate to

.expand h3 {
  width: 100%;
}