How Do I Horizontally Center a Div in CSS?-CSS Tutorial-php.cn

How Do I Horizontally Center a Div in CSS?

Mary-Kate Olsen

Release： 2024-11-29 13:58:09

Original

830 people have browsed it

How Do I Horizontally Center a Div in CSS?

Centering a Div Horizontally in CSS

Question:

How do I center a

horizontally?

Problem:

Setting text-align: center; on the

does not center it horizontally.

Answer:

Horizontal Centering for Block Elements

text-align: center; only centers the element's inline contents, not the element itself.
For block elements (like
), use:
- margin: 0 auto;

This sets top and bottom margins to 0 and left and right margins to auto of the same size. The element will be centered automatically, given that it has a known width.

Horizontal Centering for Inline Elements

Set text-align: center; on the parent element instead.

The above is the detailed content of How Do I Horizontally Center a Div in CSS?. For more information, please follow other related articles on the PHP Chinese website!

Previous article：How Can I Make My Images Responsive on My Website? Next article：How to Wrap Long Unbroken Strings in HTML Textareas?

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