Home > Web Front-end > HTML Tutorial > Centering problem, please ask a master_html/css_WEB-ITnose

Centering problem, please ask a master_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:14:06
Original
1129 people have browsed it

<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>
Copy after login

This li still cannot be centered. I have tried various methods. Please help me. How can I control the position of the button on the page? CSS seems to be difficult to use, so I should use it. Wrong


Reply to discussion (solution)

float:left; will not be centered because it has escaped the document flow. You It can be changed to display:inline;

dispaly:inline; I tried it, but there was no floating effect. I removed the background image of li and it can be centered. What happened?

was added to ul. For a div, set the width, and then margin: 0 auto; in this case, the entire ul should be in the center

It is best to clear the float after the ul




  • Gift                                                                      ;/li>


Give ul width, then margin-left:-width. Then use position: relative, and it’s done.

Thank you, everyone, it’s easy to use. Thank you.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template