Question

我对此进行了大量研究，发现如果设置宽度，可以将margin: 0 auto与left: 0;，right: 0和position: absolute一起使用，但是我看到的所有东西都有一个声明的宽度。

在我的情况下，我将为一个cursor: pointer;的按钮执行此操作，因此我不想设置宽度，因为光标将变为指针。此外，这将是一个链接，这将使其更加混乱。

所以，话虽如此，我的问题是，如何在没有声明宽度的情况下以一个绝对值为中心。

.blue-section {
  background-color: #9BD0D2;
  height: 500px;
  width: 100%;
  position: relative;
}
#blue-info-container {
  top: 20%;
  position: absolute;
  left: 0;
  right: 0;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#blue-section-title {
  color: #FFF;
  font-size: 1.4em;
  padding-bottom: 75px;
}
#blue-section-description {
  color: #FFF;
  font-size: 1.2em;
}
#blue-section-button {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  width: 300px;
  margin: 0 auto;
  cursor: pointer;
}
#blue-section-button span {
  border: 1px solid #FFF;
  text-align: center;
  color: #FFF;
  padding: 20px 20px;
}

<div class="blue-section">
  <div id="blue-info-container">
    <div id="blue-section-title">fdsfdsafsda</div>
    <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>
  </div>
  <div id="blue-section-button"><span>MORE ABOUT</span>
  </div>
</div>

Answer 1

试试这个。我稍微修改了你的css

＆＃13;

.blue-section {
                background-color: #9BD0D2;
                height: 500px;
                width: 100%;
                position: relative;
            }
            #blue-info-container {
                top: 20%;
                position: absolute;
                left: 0;
                right: 0;
                width: 70%;
                margin: 0 auto;
                text-align: center;
            }
            #blue-section-title {
                color: #FFF;
                font-size: 1.4em;
                padding-bottom: 75px;
            }
            #blue-section-description {
                color: #FFF;
                font-size: 1.2em;
            }
            #blue-section-button {
                position: absolute;
                bottom: 20%;
                left: 0;
                right: 0;
                text-align: center;
            }
            #blue-section-button span {
                border: 1px solid #FFF;
                text-align: center;
                color: #FFF;
                padding: 20px 20px;
                display: inline-block;
                cursor: pointer;
            }

＆＃13;

<div class="blue-section">
            <div id="blue-info-container">
                <div id="blue-section-title">fdsfdsafsda</div>
                <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>
            </div>
            <div id="blue-section-button"><span>MORE ABOUT</span>
            </div>
        </div>

＆＃13;

Answer 2

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>




</head>

<body>

  <div class="wrapper">

  <div class="blue-section">
  <div id="blue-info-container">
    <div id="blue-section-title">fdsfdsafsda</div>
    <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>
  </div>
  <div id="blue-section-button"><span>MORE ABOUT</span>
  </div>
</div>


</div>

</body>

</html>
















.blue-section {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    height: 250px;
    top: 0;
    bottom: 0;
}


#blue-info-container {

}
#blue-section-title {
  color: #FFF;
  font-size: 1.4em;
  padding-bottom: 75px;
}
#blue-section-description {
  color: #FFF;
  font-size: 1.2em;
}
#blue-section-button {

}
#blue-section-button span {
  border: 1px solid #FFF;
  display:inline-block;
  text-align: center;
  color: #FFF;
  padding: 20px 20px;
}

.wrapper
{  background-color: #9BD0D2;
  height: 500px;
  width: 100%;
  position: relative;

    }

Answer 3

请找到以下代码并使用jsfiddle来说明所需的行为。

简而言之 - ：在align='center'的div中添加button。并从所需按钮的CSS中删除width: 300px; margin: 0 auto;。

<强> HTML

 <div class="blue-section">
     <div id="blue-info-container">
         <div id="blue-section-title">fdsfdsafsda</div>
         <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>
     </div>
     <div id="blue-section-button" align='center'>
         <span>MORE ABOUT</span>
     </div>
 </div>

<强> CSS

.blue-section {
  background-color: #9BD0D2;
  height: 500px;
  width: 100%;
  position: relative;
}
#blue-info-container {
  top: 20%;
  position: absolute;
  left: 0;
  right: 0;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#blue-section-title {
  color: #FFF;
  font-size: 1.4em;
  padding-bottom: 75px;
}
#blue-section-description {
  color: #FFF;
  font-size: 1.2em;
}
#blue-section-button {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  cursor: pointer;
}
#blue-section-button span {
  border: 1px solid #FFF;
  text-align: center;
  color: #FFF;
  padding: 20px 20px;
}

Answer 4

试试这个

#blue-section-button{text-align:center;}

如何以不同的宽度水平居中div

4 个答案: