css inline-block centering content

Question

I have 2 problem with below css

#calendarWrap div{
        display: inline-block;
        width: 50px;
        height: 50px;
        background: white;
        border: 1px solid black;
        text-align: center;
        padding: 30px;  
}

* {
  box-sizing:border-box;
}

https://jsbin.com/bononudiju/edit?html,css,output

Why the content isn't center completely? It's slightly off down to the bottom, it should be a little bit up. Do I have to adjust the position manually? I know I can using position relative, but is there anyway I can make it center regardless the height and width?
Why there's gab between the boxes?

The gap is because of the next-line, try aligning them all, or put a blank comment — Carl Binalla, Mar 13 '17 at 03:25
Possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — apaul, Mar 13 '17 at 04:02

score 0 · Answer 1 · answered Mar 13 '17 at 03:25

0

Remove the padding. Add line-height: 50px;.

The gap between the boxes is the physical space in the HTML. Make the parent font-size: 0.

answered Mar 13 '17 at 03:25

Jim Cote

1,746
3
15
26

score 0 · Answer 2 · answered Mar 13 '17 at 03:25

0

Just add float: left; to your #calendarWrap div and change the padding to padding: 15px 0;

answered Mar 13 '17 at 03:25

Sam Chahine

530
1
17
52

score 0 · Answer 3 · answered Mar 13 '17 at 03:27

0

To remove the gaps, try this:

<div id="calendarWrap">
    <div>1</div><!--
 --><div>2</div><!--
 --><div>3</div><!--
 --><div>4</div><!--
 --><div>5</div>
</div>

answered Mar 13 '17 at 03:27

Carl Binalla

5,393
5
27
46

why is this even needed? – Alex Yong Mar 13 '17 at 03:29
This is to remove the gaps – Carl Binalla Mar 13 '17 at 03:33

Gosi · Accepted Answer · 2017-03-13T03:55:41.333

-1

You can try this:

#calendarWrap div{
  display: inline-block;
  width: 50px;
  height: 50px;
  background: white;
  border: 1px solid black;
  text-align: center;
    line-height:50px;
}

* {
  box-sizing:border-box;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="calendarWrap">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   </div>

</body>
</html>

Basically, replace the padding with line-height and in the link you sent, the editor seems to auto space when you hit on the enter button.

edited Mar 13 '17 at 03:55

answered Mar 13 '17 at 03:29

Gosi

2,004
3
24
36

when to use padding? when to use line-height? – Alex Yong Mar 13 '17 at 03:31
1

I usually like to use `line-height` to get an accurate middle alignment, but of course, that is not the reason. It just a personal preference of mine. So in your case, you have a height set in pixel, so I prefer to use `line-height` instead. Just a personal preference. – Gosi Mar 13 '17 at 03:54

score -1 · Answer 5 · answered Mar 13 '17 at 03:30

To remove the space between the elements, remove the white space between the elements. Since those are inline-block (treated as inline) they will preserve white space inside and between the blocks. And if you want to center the contents inside those boxes horizontally and vertically, the easiest way would probably be to apply display: inline-flex; align-items: center; justify-content: center;

#calendarWrap div{
  display: inline-flex;
  width: 50px;
  height: 50px;
  background: white;
  border: 1px solid black;
  padding: 30px; 
  align-items: center;
  justify-content: center;
}

* {
  box-sizing:border-box;
}

<div id="calendarWrap">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

StackSlave · Answer 6 · 2017-03-13T03:54:14.717

I suggest you use display:table-cell; vertical-align:middle; text-align:center;. That's more reproducible.

#calendarWrap>div{
  display:table-cell; vertical-align:middle; width:50px;
  height:50px; text-align:center; border:#000 solid 1px;
  border-left:0;
}
#calendarWrap>div:first-child{
  border-left:#000 solid 1px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <title>display centered</title>
  </head>
<body>
  <div id='calendarWrap'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
  </div>
</body>
</html>

css inline-block centering content

6 Answers6