Question

我在下面的css中有2个问题

#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

为什么内容不完全居中？它略微下降到底部，它应该有点上升。我必须手动调整位置吗？我知道我可以使用位置相对，但无论如何我可以使它无论高度和宽度都居中？
为什么盒子之间有瞎扯？

Answer 1

删除填充。添加line-height: 50px;。

框之间的差距是HTML中的物理空间。制作父font-size: 0。

Answer 2

只需将float: left;添加到#calendarWrap div，然后将填充更改为padding: 15px 0;

Answer 3

要消除差距，请尝试以下方法：

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

Answer 4

你可以试试这个：

#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>

基本上，用line-height替换填充，并在您发送的链接中，当您点击输入按钮时，编辑器似乎是自动空间。

Answer 5

要删除元素之间的空格，请删除元素之间的空白区域。由于这些是inline-block（视为inline），因此它们将保留块内部和块之间的空白区域。如果你想将内容水平和垂直地放在这些框内，最简单的方法可能就是应用display: inline-flex; align-items: center; justify-content: center;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

我建议你使用#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>

{{1}}

css内联块中心内容

6 个答案: