How to set float center in css?
In the float attribute of CSS, float:right floats to the right and float:left floats to the left, but the centered attribute is not set. So what should we do if we want to center the float attribute? This article will introduce to you how to center the float attribute in CSS.
We often use floating centering when making navigation bars. Below we will use the floating centering of navigation bars to introduce to you the float centering method in CSS. (Related recommendation: How to use the float attribute of css?)
How to center float in css: Use display:inline-block and float:left
Let’s look at the specific float centering example code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
text-align:center;
}
li {
float:left;
font-size:12px;
}
a {
float:left;
border:1px solid #000;
padding:5px 10px;
text-decoration:none;
color:#000;
}
ul {
display:inline-block;
*display:inline;
zoom:1;
}
</style>
</head>
<body>
<ul>
<li><a href="#nogo">首页</a></li>
<li><a href="#nogo">视频</a></li>
<li><a href="#nogo">文章</a></li>
<li><a href="#nogo">登录</a></li>
<li><a href="#nogo">留言</a></li>
</ul>
</body>
</html>The effect of float centering is as follows:
Regarding the above code, we will see a *display:inline;, which is actually a CSS hack writing method; (if you don’t know the CSS hack writing method, you can search it on Baidu yourself) *{margin: 0;padding: 0;} is a common "reset" style in the past, which means to stick all the elements in the web page tightly together. Because different browsers will produce different default element styles, so *{ margin: 0; padding: 0;} The main purpose is to help you reset the default styles of different browsers, so that the results of different browsers displaying web pages will not be too different.
After reading the above methods, you may sometimes not think of using CSS hack to write, and the compatibility is not good,
So let’s take a look at the implementation method without using *display:inline;
How to set float centering code example in css (without using *display:inline;):
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.xlk-nav {
width: 100%;
height: 40px;
text-align: center;
background-color: lightblue;
}
.xlk-menu {
height: 100%;
float: left;
line-height: 40px;
padding: 0 20px;
margin-right: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="xlk-nav">
<div style="display: inline-block;">
<div class="xlk-menu">首页</div>
<div class="xlk-menu">视频</div>
<div class="xlk-menu">文章</div>
<div class="xlk-menu">登录</div>
<div class="xlk-menu">留言</div>
</div>
</div>
</body>
</html>The centering effect is as follows:
The above is the detailed content of How to set float center in css?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1382
52
What is the maximum value of float?
Oct 11, 2023 pm 05:54 PM
Maximum value of float: 1. In C language, the maximum value of float is 3.40282347e+38. According to the IEEE 754 standard, the maximum exponent of the float type is 127, and the number of digits of the mantissa is 23. In this way, the maximum floating point number is 3.40282347 e+38; 2. In the Java language, the maximum float value is 3.4028235E+38; 3. In the Python language, the maximum float value is 1.7976931348623157e+308.
What is the accuracy of float?
Oct 17, 2023 pm 03:13 PM
The precision of float can reach 6 to 9 decimal places. According to the IEEE754 standard, the number of significant digits that the float type can represent is approximately 6 to 9 digits. It should be noted that this is only the theoretical maximum precision. In actual use, due to the rounding error of floating point numbers, the precision of the float type is often lower. When performing floating-point number operations in a computer, precision loss may occur due to the precision limitations of floating-point numbers. In order to improve the precision of floating point numbers, you can use higher precision data types, such as double or long double.
What are the database float lengths?
Oct 10, 2023 pm 03:57 PM
Common database float lengths are: 1. The float type length in MySQL can be 4 bytes or 8 bytes; 2. The float type length in Oracle can be 4 bytes or 8 bytes; 3. , The length of the float type in SQL Server is fixed at 8 bytes; 4. The length of the float type in PostgreSQL can be 4 bytes or 8 bytes, etc.
What does float mean in c language?
Oct 12, 2023 pm 02:30 PM
Float in C language is a data type used to represent single-precision floating point numbers. Floating point numbers are real numbers represented in scientific notation and can represent very large or very small values. Variables of the float type can store values with 6 significant digits after the decimal point. In C language, the float type can be used to operate and store floating point numbers. Its variables can be used to represent decimals, fractions, scientific notation, etc. that need to be accurately represented. Real numbers, unlike integer types, floating point numbers can represent numbers after the decimal point, and can perform four arithmetic operations on decimals.
What does float32 bytes include?
Oct 10, 2023 pm 04:07 PM
The float32 byte includes the sign bit, exponent bit and mantissa bit, and is used to represent 32-bit floating point numbers. Detailed introduction: 1. Sign bit (1 bit), used to represent the sign of a number, 0 represents a positive number, 1 represents a negative number; 2. Exponent bit (8 bits), used to represent the exponent part of a floating point number, through the exponent bit , you can adjust the size range of the floating-point number; 3. The mantissa bit (23 bits) is used to represent the mantissa part of the floating-point number, and the mantissa bit stores the decimal part of the floating-point number. The sign bit determines the sign of a floating point number, and the exponent bit and the mantissa bit jointly determine the size and precision of the floating point number.
What are the values of float attribute?
Oct 10, 2023 pm 02:03 PM
The float attribute values include left, right, none, inherit, clearinline-start and inline-end. Detailed introduction: 1. left, the element floats to the left, that is, the element will be as close to the left side of the container as possible, and other elements will surround it on the right side; 2. right, the element floats to the right, that is, the element will be as close to the container as possible On the right, other elements will surround it on the left; 3. The default value of none, the elements will not float, and will be arranged according to the normal document flow, etc.
What problems will float layout cause?
Oct 10, 2023 pm 03:31 PM
Float layout can cause problems such as clearing floats, element overlapping problems, text wrapping problems, and responsive layout problems. Detailed introduction: 1. Clear the floating problem. When using float layout, the floating elements will break away from the document flow, which may cause the parent container to be unable to wrap the floating elements correctly. In this case, the height of the parent container will collapse, causing layout chaos; 2. Element overlapping problem. When multiple elements use float layout, they may overlap. This is because the floating elements no longer occupy the normal document flow position and so on.
What is the difference between float and double
Oct 11, 2023 pm 05:38 PM
The main differences between float and double lie in precision, storage and calculation speed, range, and use in programming languages. Detailed introduction: 1. The precision is different. Float is a single-precision floating point number, occupying 4 bytes (32 bits), while double is a double-precision floating point number, occupying 8 bytes (64 bits); 2. The storage and calculation speed are different. , double takes up more space and requires more storage space to store values. In applications that require high performance and speed, it may be more efficient to use the float type; 3. Different ranges, etc.
