CODEWITHSUNDEEP
javascriptcss
syed imty
syed imty

Reputation: 1028

How to center a div with transition animation

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

Upvotes: 0

Views: 107

Answers (1)

Willem Van Bockstal
Willem Van Bockstal

Reputation: 2263

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%;
}

Upvotes: 1

Related Questions