不使用flex来居中div

Question

我创建了一个带有文本和两个按钮的横幅。我使用Inline-block元素来对齐元素，因为我不想使用flex。横幅上的左边距正确设置但不正确。我可以将横幅内容（#wrapper元素）置于屏幕中心，以便左侧和右侧的填充等于90px。你对这个问题有所了解吗？这是我的代码，这是一个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>

Answer 1

这是由于浮动而发生的：左侧是为样式中具有id =“right”的元素设置的。如下所示，为#right更改浮动到右边。

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

Answer 2

#wrapper {
    position: fixed;
    width:100%;
    height: 160px;
    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;
    width:35%;
    position:relative;

}
#button1 {
    height: 70px; 
    width: 70px; 
    background-color: red;
    display: inline-block;
    line-height:70px;
    text-align:center;
    position:absolute;
    left:calc(50% - 90px);
    transform:translateX(-50%);

}
#button2 {
    height: 70px; 
    width: 70px;
    background-color: green;
    display: inline-block;
    line-height:70px;
    text-align:center;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

Answer 3

你可以像这样使用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>

Answer 4

您可以通过给它一个明确的block（70％，350px）并设置div和width来居中任何margin-left:auto元素（如margin-right:auto）。 div应该很好地居中。希望这可以帮助。

Answer 5

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

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