CSS 按钮不会在 div 的中心对齐

Question

我有一个带有展示div网站，在div我有一个“开始使用” button 。 我能够将button与margin属性垂直对齐。 但是我不想将button与margin水平对齐，因为这会给我带来一些麻烦，我试过align: center; 和align="center"但button粘在陈列柜的左侧。 如何在不使用margin属性的情况下取消粘贴此button并水平对齐它？

 html, body, header { position: absolute; left: 0; top: 0; width: 100%; margin: 0; margin-top: 0; margin: auto; padding: 0; } h1 { display: inline-block; font-family: Trebuchet MS; font-size: 75px; letter-spacing: 3px; margin: 10px 0px 0px 20px; } h2 { display: inline-block; flex-direction: row; margin: 0px 0px 0px 50px; font-family: Georgia; } .highlight { color: #45d845; } .heading { background-color: #d84545; border-bottom: 5px solid black; padding-top: 20px; padding-bottom: 20px; } #comet { font-size: 65px; margin-left: 20px; } .showcase { background: url('background1.jpeg'); border-bottom: 5px solid black; height: 1000px; width: 100%; background-size: 100% 100%; background-repeat: no-repeat; color: #cccccc; } .showcase h2 { color: #fff; margin-top: 170px; font-size: 60px; font-family: Verdana; text-align: center; text-shadow: 1px 3px #000; } #start { align: center; margin-top: 130px; background-color: transparent; color: #fff; padding: 20px 30px 20px 30px; text-align: center; font-family: Helvetica; font-weight: bold; border-radius: 10px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } #start:hover { cursor: pointer; background-color: #fff; color: #000; }

 <header> <div class="heading"> <h1>ThumbTac <span id="comet">&#9732;</span> </h1> </div> </header> <div class="showcase"> <h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2> <button id="start" align="center">Get Started</button> </div>

Answer 1

您可以使用样式text-align: center;将button包裹在div text-align: center; 将button水平居中。 例子：

 html, body, header{ position:absolute; left:0; top:0; width: 100%; margin: 0; margin-top: 0; margin: auto; padding: 0; } /*Heading*/ h1{ display: inline-block; font-family: Trebuchet MS; font-size: 75px; letter-spacing: 3px; margin: 10px 0px 0px 20px; } h2{ display: inline-block; flex-direction: row; margin: 0px 0px 0px 50px; font-family: Georgia; } .highlight{ color: #45d845; } .heading{ background-color: #d84545; border-bottom: 5px solid black; padding-top: 20px; padding-bottom: 20px; } #comet{ font-size: 65px; margin-left: 20px; } /*Showcase*/ .showcase{ background: url('background1.jpeg'); border-bottom: 5px solid black; height: 1000px; width: 100%; background-size: 100% 100%; background-repeat: no-repeat; color: #cccccc; } .showcase h2{ color: #fff; margin-top: 170px; font-size: 60px; font-family: Verndana; text-align: center; text-shadow: 1px 3px #000; } #start{ align: center; margin-top: 130px; background-color: transparent; color: #fff; padding: 20px 30px 20px 30px; text-align: center; font-family: Helvetica; font-weight: bold; border-radius: 10px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } #start:hover{ cursor: pointer; background-color: #fff; color: #000; }

 <header> <div class="heading"> <h1>ThumbTac <span id="comet">&#9732;</span> </h1> </div> </header> <div class="showcase"> <h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2> <div style="text-align: center;"> <button id="start">Get Started</button> </div> </div>

Answer 2

您可以考虑使用flexbox 。 CSS 源中的文档。

 /* Global Sets */ html, body, header { position: absolute; left: 0; top: 0; width: 100%; margin: 0; margin-top: 0; margin: auto; padding: 0; } /*Heading*/ h1 { display: inline-block; font-family: Trebuchet MS; font-size: 75px; letter-spacing: 3px; margin: 10px 0px 0px 20px; } h2 { display: inline-block; flex-direction: row; margin: 0px 0px 0px 50px; font-family: Georgia; } .highlight { color: #45d845; } .heading { background-color: #d84545; border-bottom: 5px solid black; padding-top: 20px; padding-bottom: 20px; } #comet { font-size: 65px; margin-left: 20px; } /*Showcase*/ .showcase { background: url('background1.jpeg'); border-bottom: 5px solid black; height: 1000px; width: 100%; background-size: 100% 100%; background-repeat: no-repeat; color: #cccccc; display: flex; /* Added */ flex-direction: column; /* Added */ align-items: center; /* Added, horizonal alignment */ } .showcase h2 { color: #fff; margin-top: 170px; font-size: 60px; font-family: Verndana; text-shadow: 1px 3px #000; text-align: center; } #start { /* align: center; Not valid CSS */ margin-top: 130px; background-color: transparent; color: #fff; padding: 20px 30px 20px 30px; /* text-align: center; No longer required */ font-family: Helvetica; font-weight: bold; border-radius: 10px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } #start:hover { cursor: pointer; background-color: #fff; color: #000; }

 <header> <div class="heading"> <h1>ThumbTac <span id="comet">&#9732;</span> </h1> </div> </header> <div class="showcase"> <h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2> <button id="start" align="center">Get Started</button> </div>