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

发生这种情况是由于float：为样式中具有id =“ right”的元素设置了left。如下所示，将float更改为#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

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

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

Answer 4

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

您可以将任意block元素（如div）居中，方法是将其指定为width（70％，350像素）并设置margin-left:auto和{{1 }}。 div应该居中。希望这会有所帮助。

在不使用flex的情况下将div居中

5 个答案: