html5 - html怎么让div居中啊??
伊谢尔伦
伊谢尔伦 2017-04-17 13:09:33
0
4
1229
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

reply all(4)
左手右手慢动作

I didn’t read your code.
But there are many ways to center the fast element:
1: display:inline-block
<style>

.total{width:1000px;height:auto;border:1px solid #ccc;text-align:center;}
.center{width:200px;height:50px;background-color:blue;display:inline-block;}

</style>
<p class='total'>

<p class='center'></p>

</p>

2: Unknown width and height: position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
<style>

.total{width:1000px;height:auto;border:1px solid #ccc;}
.center{width:200px;height:50px;background-color:blue;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

</style>
<p class='total'>

<p class='center'></p>

</p>

2: Known width and height: width:200px;height:200px;position:absolute;left:50%;top:50%;transform:translate(-100px,-100px);
<style>

.total{width:1000px;height:auto;border:1px solid #ccc;}
.center{width:200px;height:50px;background-color:blue;position:absolute;left:50%;top:50%;transform:translate(-100px,-100px)}

</style>
<p class='total'>

<p class='center'></p>

</p>

The above code has not been tested, if you have any questions please ask

巴扎黑

Infelx plus justify plus align are not easy to use, but remember to be compatible

Peter_Zhu

margin:0 auto

左手右手慢动作

http://jackzong.github.io/201...

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!