Home >Web Front-end >CSS Tutorial >How to Perfectly Center a Horizontal `` Menu and its List Items?
Centering a Horizontal Menu
Problem:
A horizontal menu consisting of an unordered list (
Solution:
To achieve perfect centering of both the
Code Example:
#buttons { float: right; position: relative; left: -50%; text-align: left; } #buttons ul { list-style: none; position: relative; left: 50%; } #buttons li { float: left; position: relative; }
HTML Example:
<div>
With this implementation, the menu will be perfectly centered, with the list items evenly distributed within the horizontal space.
The above is the detailed content of How to Perfectly Center a Horizontal `` Menu and its List Items?. For more information, please follow other related articles on the PHP Chinese website!