How to center a DIV using the position:fixed attribute
Let me share with you the key code to use the position:fixed attribute to center the div: position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto, if you are interested Friends can refer to it
The key code is : #topmenu_keleyi_com{position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right :auto;}
Attached complete code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使position:fixed的p居中-柯乐义</title>
<style type="text/css">
#topmenu_keleyi_com{position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto;top:100px;height:50px;background-color:Red;}
#topmenu_keleyi_com li{float:left;
list-style:none;
margin-right:1px;
width:116px;
background-color:#e0f0e0;
}
#topmenu_keleyi_com ul{ margin:0px;padding:0px;}
body{margin:0px;}
</style>
</head>
<body>
<p id="topmenu_keleyi_com">
<ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a></li>
<li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a></li>
<li><a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li>
<li><a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li>
<li><a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a></li>
<li><a href="http://www.keleyi.com/" target="_blank">首页</a></li></ul>
position:fixed的p的居中效果,改变页面的宽度看看。
</p>
</body>
</html>The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Analysis of CSS floating float and positioning
The above is the detailed content of How to center a DIV using the position:fixed attribute. 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
How to set WPS table centering
Mar 19, 2024 pm 09:34 PM
As the functions of WPS become more and more powerful, we encounter more and more problems about the use of functions. In WPS, we often use WPS tables. If we need to print the WPS table, in order to make the table look beautiful, we need to center the table at this time. So, the question is, how do we center the WPS table? Today I am sharing a tutorial here, I hope it can help you! Step details: 1. I will explain it through practical operations. The following is a simple table I made using a WPS table. 2. Through print preview, we can find that the WPS table is on the left by default. What if we want to center the table? 3. At this time, we need to click [Page Layout] in the [Toolbar]
Flexible application skills of position attribute in H5
Dec 27, 2023 pm 01:05 PM
How to flexibly use the position attribute in H5. In H5 development, the positioning and layout of elements are often involved. At this time, the CSS position property will come into play. The position attribute can control the positioning of elements on the page, including relative positioning, absolute positioning, fixed positioning and sticky positioning. This article will introduce in detail how to flexibly use the position attribute in H5 development.
CSS layout property optimization tips: position sticky and flexbox
Oct 20, 2023 pm 03:15 PM
CSS layout attribute optimization tips: positionsticky and flexbox In web development, layout is a very important aspect. A good layout structure can improve the user experience and make the page more beautiful and easy to navigate. CSS layout properties are the key to achieving this goal. In this article, I will introduce two commonly used CSS layout property optimization techniques: positionsticky and flexbox, and provide specific code examples. 1. positions
How to use position in h5
Dec 26, 2023 pm 01:39 PM
In H5, you can use the position attribute to control the positioning of elements through CSS: 1. Relative positioning, the syntax is "style="position: relative;"; 2. Absolute positioning, the syntax is "style="position: absolute;" "; 3. Fixed positioning, the syntax is "style="position: fixed;" and so on.
How to put div at the bottom in html
Mar 02, 2021 pm 05:44 PM
How to place a div at the bottom of HTML: 1. Use the position attribute to position the div tag relative to the browser window, with the syntax "div{position:fixed;}"; 2. Set the distance to the bottom to 0 to permanently place the div at At the bottom of the page, the syntax is "div{bottom:0;}".
What attributes does position have?
Oct 10, 2023 am 11:18 AM
The position attribute values include static, relative, absolute, fixed, sticky, etc. Detailed introduction: 1. static is the default value of the position attribute, which means that the elements are laid out according to the normal document flow without special positioning. The position of the elements is determined by their order in the HTML document and cannot be passed through top, right, and bottom. Adjust with the left attribute; 2. relative is relative positioning and so on.
How to center a div inside another div?
Sep 08, 2023 am 11:13 AM
Introduction Center alignment of divs is one of the most important aspects of front-end development. In this article, we will look at the technique of placing one div inside another div using HTML and CSS. In this tutorial we will have a parent div which should have child divs. Our task is to place the child div in the center of the parent div. Using Transform translation and position syntax this is not a very popular way to center align one div into another div syntax left:50%;top:50%;Transform:translate(-50%,-50%);above The syntax does the following - The CSS rule "left:50%;" sets the horizontal position of the element to
Usage and effect display of sticky positioning attribute in CSS
Dec 27, 2023 pm 12:08 PM
Application examples of the position attribute in CSS: usage and effects of sticky positioning In front-end development, we often use the position attribute of CSS to control the positioning of elements. Among them, the position attribute has four optional values: static, relative, absolute and fixed. In addition to these common location attributes, there is also a special positioning method, namely sticky positioning. This article will discuss the usage and effects of sticky positioning
