[英]How to center a div horizontally with a varying width
我對此進行了大量研究，發現如果設置寬度，則可以使用margin: 0 auto和left: 0; ， right: 0和position: absolute ，但我看到的所有內容都具有聲明的寬度。
在我的情況下，我將對帶有cursor: pointer;的按鈕執行此操作cursor: pointer; ，所以我不想設置寬度，因為光標會變成指針。 另外，這將是一個鏈接，並且會使它更加混亂。
因此，話雖如此，我的問題是，如何在不聲明寬度的情況下將div以絕對值居中？
.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>
嘗試這個。 我對您的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; text-align: center; } #blue-section-button span { border: 1px solid #FFF; text-align: center; color: #FFF; padding: 20px 20px; display: inline-block; cursor: pointer; }
<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>
<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;
}
嘗試這個
#blue-section-button{text-align:center;}
請找到以下代碼並使用jsfiddle來說明所需的行為。
簡而言之-：在button的div中添加align='center' 。 並刪除width: 300px; margin: 0 auto; width: 300px; margin: 0 auto; 從所需按鈕的CSS。
的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;
}
如何在固定寬度和邊距的div中將div水平居中？
[英]How to center divs within a div horizontally with fixed width and margins?
如何將div內部的div水平居中，而內部的div具有其文本內容的寬度？
[英]how to center div inside div horizontally and inner div have width of its text content?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.