html - CSS 按钮不会在 div 的中心对齐
问题描述
我有这个网站,div
里面有一个展示,div
我有一个“开始” button
。我能够button
与margin
属性垂直对齐。但是我不想水平对齐button
,margin
因为这会在将来给我带来一些麻烦,我已经尝试过align: center;
,align="center"
但button
粘在展示柜的左侧。如何button
在不使用margin
属性的情况下解开它并水平对齐它?
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">☄</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>
解决方案
您可以将您的样式包裹button
在 a中以水平居中您的. 例子: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">☄</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>
推荐阅读
- php - 如果语句在 9 项后停止工作
- java - Java ClassLoader getResources 不适用于 Launcher$AppClassLoader
- javascript - 如何通过单击上一页中的按钮重定向到新页面并在那里显示模式?
- typescript - 打字稿 npm 库
- python - 基本的 Django 搜索实现
- r - 用从对象中提取的内容替换数据框中的值的有效方法?
- javascript - 如何获取硒中单击事件的按钮路径
- php - 克隆对象可以在单例模式中具有相同的范围吗?
- apache-spark - Spark程序抛出异常
- angular - 对于角度 4 中大于 10 的值,过滤器 orderby 无法按预期工作