html – 如何使用css将此按钮设置为x轴的中心？

概述我尝试使用css将此按钮设置为x轴的中心,但它不起作用. 我怎样才能做到这一点 ？ https://jsfiddle.net/9e9rb6L5/ 这是HTML代码. <div class="one"> <div class="two">start now</div> </div> 这是css. .one{ height: 66px; line-height: 36p 我尝试使用CSS将此按钮设置为x轴的中心,但它不起作用.

我怎样才能做到这一点 ？

https://jsfiddle.net/9e9rb6L5/

这是HTML代码.

<div >    <div >start Now</div>    </div>

这是CSS.

.one{    height: 66px;    line-height: 36px;    text-align: center;    margin: 0 auto;}.two{    float: left;    background-color: #3498db;    color: white;    Font-size: 24px;    padding-top: 15px;    padding-bottom: 15px;    padding-left: 20px;    padding-right: 20px;}

解决方法 试试这个：
你需要添加宽度：fit-content;在.one类.

.one{    height: 66px;    line-height: 36px;    display:block;  margin:0 auto;       wIDth: fit-content;  text-align:center;}.two{    float: left;    background-color: #3498db;    color: white;    Font-size: 24px;    padding-top: 15px;    padding-bottom: 15px;    padding-left: 20px;    padding-right: 20px;  }

<div >    <div >start Now</div>    </div>

>还有一种方法：在.one类中显示：table

.one{    height: 66px;    line-height: 36px;    display:table;    margin:0 auto;    text-align:center;  }.two{    float: left;    background-color: #3498db;    color: white;    Font-size: 24px;    padding-top: 15px;    padding-bottom: 15px;    padding-left: 20px;    padding-right: 20px;  }

<div >    <div >start Now</div>    </div>

>第三种方式,你可以使用flex属性.

.one{    height: 66px;    line-height: 36px;    text-align: center;    margin: 0 auto;    display:flex;    justify-content:center;}.two{    float: left;    background-color: #3498db;    color: white;    Font-size: 24px;    padding-top: 15px;    padding-bottom: 15px;    padding-left: 20px;    padding-right: 20px;}

<div >    <div >start Now</div>    </div>

总结

以上是内存溢出为你收集整理的html – 如何使用css将此按钮设置为x轴的中心？全部内容，希望文章能够帮你解决html – 如何使用css将此按钮设置为x轴的中心？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。