Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Getting Started with CSS Intro to CSS Review

Miguel Nunez
Miguel Nunez
3,266 Points
Posted by Miguel Nunez
Miguel Nunez
3,266 Points

how to center inline-block button in css?

Here's my code link https://docs.google.com/document/d/1MbK9LdN90yjd8dsRU7azPEsejXGaoH3AR982OjJsT24/edit

2 Answers

Joel Bardsley
Joel Bardsley
31,246 Points
Joel Bardsley
Joel Bardsley
31,246 Points

You have a few options. The easiest way is to set the parent element of the inline-block to text-align: center.

Otherwise there are two methods involving relative positioning:

.myButton {
  position: relative;
  left: 50%; /* the left edge of the button is now in the center of the parent element. Now we need to nudge the button back to the left by 50% of the button width to make it center aligned. */
  margin-left: -100px; /* If you've set a width for your button (in this case, 200px), enter 50% of its value here. Note that if you set margin-left: -50%, this will move the button -50% of the parent element, which will return it to the far left side. */
}

or

.myButton {
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* this will calculate what 50% of the element width is and will move it across the X-axis. The negative value ensures it moves to the left. */
}

More information on CSS Transforms here

Matthew Francis
Matthew Francis
6,967 Points
Matthew Francis
Matthew Francis
6,967 Points 
.class{
position:relative/absolute;
left:50%; //Moves the element to the left by 50%
transform: translateX(-50%); //get half of the element's width and subtract that value with left's value
}