Breaking News: Grepper is joining You.com. Read the official announcement!

how to center a inline block element

Add Answer

Depressed Dove answered on November 10, 2020 Popularity 10/10 Helpfulness 7/10

answer how to center a inline block element

related inline block align center

related Center a Block element

related how to center three inline block elements

how to center a inline block element

Comment

  display: inline-block;
  position: relative;
  /* Move the element to the right by 50% of the container's width */
  left: 50%; 
  /* Calculates 50% of the element's width, and moves it by that */ 
  /* amount across the X-axis to the left */
  transform: translateX(-50%);

Popularity 10/10 Helpfulness 7/10 Language css

Source: stackoverflow.com

Tags: block center css element inline

Link to this answer
Share Copy Link

Contributed on Dec 23 2021

Depressed Dove

0 Answers Avg Quality 2/10

Closely Related Answers

inline block align center

Comment

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

Popularity 10/10 Helpfulness 10/10 Language css

Source: stackoverflow.com

Tags: block bloc

Link to this answer
Share Copy Link

Contributed on Nov 10 2020

Selfish Swan

0 Answers Avg Quality 2/10

Center a Block element

Comment

//if i want to center a block element
then there a multipleways

<div class="parent">
  <div class="child" > </div>
</div>

1) first make the parent postion:realative;
2)child postion absolute so that you can use top,left,right,bottom props
3) set left:0 and right:0 and margin:auto and you child element will be center
4)margin:auto center a child element horizontally and leave equal space to 
its left and right so if you set left and right to  0 in child element
it means the child is to be set where the left is 0 since the position is
already absoulte than your element will then the left prop will be consider
from where the margin auto prop end thats the space left after horizantal center

second way
 position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

1) the postion absolute force the element to consider the top and left props
directly from its parent that means the props will start
at the end of top 50% and left 50% and to balance it out we use
-50% to the y -axis and same to the x- axis this will center the
element

Popularity 9/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: block bloc

Link to this answer
Share Copy Link

Contributed on Jul 28 2022

freelance developer

0 Answers Avg Quality 2/10

how to center three inline block elements

Comment

text-align: center; on the parent element

Popularity 7/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: block center elements

Link to this answer
Share Copy Link

Contributed on Feb 16 2022

Tired Turtler

0 Answers Avg Quality 2/10

how to center a inline block element

Contents

More Related Answers

how to center a inline block element

Closely Related Answers

inline block align center

Center a Block element

how to center three inline block elements

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.