Maison > interface Web > tutoriel HTML > 居中问题,求大神_html/css_WEB-ITnose

居中问题,求大神_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:14:06
original
1129 Les gens l'ont consulté

<style type="text/css">body{	text-align:center;}li{	background-image:url(images/btn3.jpg);	float:left;	list-style-type:none;	width:155px;	height:58px;	text-align:center;	color:#F09;	font-weight:bold;	font-size:16px;	font-family:Arial, Helvetica, sans-serif;}</style></head><ul>    <li></br>Gift</li>    <li></br>I,Say</li>    <li></br>Photo</li>    <li></br>Letter</li></ul>
Copier après la connexion

这个li始终就是不能居中,试了各种方法了, 求大神解救啊, 还有button怎么控制他在页面中的位置啊,CSS貌似不好用,还是我用的不对


回复讨论(解决方案)

float:left;是不会居中的,因为它已经逃出了文档流了,你可以改成display:inline;

dispaly:inline;我试了, 没有浮动效果啊, 我把li的背景图片拿掉 就可以居中 怎么回事,

在ul外加一个div,设置宽度,然后margin:0 auto;这样的话整个ul就应该剧中了

最好ul后面清除浮动



        
  • Gift

  •     
  • I,Say

  •     
  • Photo

  •     
  • Letter


去掉里 样式的 float:left;  改用display:inline-block;这样就可以了~

给ul宽度,然后margin-left:-宽度.之后用position:relative,就搞定了.

谢谢各位大神,好用了 谢谢。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal