[英]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.