不使用 flex 将 div 居中答案

【问题标题】：Center a div without using flex不使用 flex 将 div 居中
【发布时间】：2018-11-27 03:54:04
【问题描述】：

我创建了一个带有文本和两个按钮的横幅。我使用 Inline-block 元素来对齐元素，因为我不想使用 flex。横幅上的左侧填充设置正确，但右侧不正确。我可以将横幅内容（#wrapper 元素）在屏幕上居中，以便左侧和右侧的填充等于 90 像素。你对这个问题有什么想法吗？这是我的代码，这是demo

#wrapper {
  background-color: gray;
  padding-left: 90px;
  padding-right: 90px;
}

#wrapper:after {
  content: "";
  display: table;
  clear: both;
}

#left {
  padding-top: 33px;
  padding-bottom: 33px;
  width: 65%;
  display: inline-block;
  height: 80px;
  line-height: 44px;
  float: left;
}

#right {
  padding-top: 45px;
  padding-bottom: 45px;
  display: inline-block;
  float: left;
}

#button1 {
  height: 70px;
  width: 70px;
  margin-right: 20px;
  background-color: red;
  display: inline-block;
}

#button2 {
  height: 70px;
  width: 70px;
  background-color: green;
  display: inline-block;
}

<div id="wrapper">
  <div id="left">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
  </div>
  <div id="right">
    <div id="button1">more</div>
    <div id="button2">ok</div>
  </div>
</div>

【问题讨论】：

不确定您是否需要另一个问题，这似乎与此相同：stackoverflow.com/questions/53478572/… .. 您可以编辑旧的或删除它，两者都有相同的目的
附带说明，您在这里没有使用 inline-block，您使用的是 float ... inline-block 在设置 float 时无用

标签： html css centering

【解决方案1】：

这是因为 float:left 设置为样式中具有 id="right" 的元素。将 #right 的浮动向右更改，如下所示。

#right {
    padding-top: 45px;
    padding-bottom: 45px;
    display: inline-block;
    float: right;    <!-- // Change left to right  -->
}

【讨论】：

在这种情况下按钮超出了右边的div
现在在样式中的 #right {} 块中提供一些 padding-right 值，例如 padding-right: 90px

【解决方案2】：

您可以像这样使用calc() CSS function、white-space 和text-align

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#wrapper {
  background-color: gray;
  padding-left: 90px;
  padding-right: 90px;
  position: relative;
  text-align: center;
  min-width: 480px; 
  width: 100%;
  max-width:960px;
  margin: 0 auto;
  white-space: nowrap;
}
#left,
#right{
display:inline-block;     
vertical-align: middle; 
 white-space: normal;
}

#left {
  padding-top: 33px;
  padding-bottom: 33px;
  width: calc(100% - 160px); /*160px = 70x2 + 20*/
  text-align:left;
  line-height: 44px; 
  background: orange
}

#right {
  width:160px;
  padding-top: 45px;
  padding-bottom: 45px; 
  white-space: nowrap;
}
#button1,
#button2{
  height: 70px;
  width: 70px; 
  display: inline-block;
  white-space: normal;
}
#button1 { 
  margin-right: 20px;
  background-color: red;
}

#button2 { 
  background-color: green; 
}

<div id="wrapper">
  <div id="left">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
  </div>
  <div id="right">
    <div id="button1">more</div>
    <div id="button2">ok</div>
  </div>
</div>

【讨论】：

【解决方案3】：

您可以通过为任何block 元素（如div）指定一个明确的width（70%，350px）并设置margin-left:auto 和margin-right:auto，使其居中。 div 应该居中就好了。希望这会有所帮助。

【讨论】：

【解决方案4】：

尝试删除width=100% 和wrapper，填充将正确设置：

#wrapper {
    position: fixed;
    /* width:100%; */
  height: 160px;
    background-color: gray;
    padding-left: 90px;
    padding-right: 90px;
}

【讨论】：