ADVERTISEMENTS

How to align content horizontally center with CSS

You can easily implement this with margin property of css. The margin property is used to specify the amount of space around an HTML element. The margin property is a shorthand property that allows you to set the margins for all four sides of an element at once, or you can set the margins for each side individually with the properties margin-top, margin-right, margin-bottom, and margin-left. The margin property takes one or multiple values, which can be specified in a variety of units, including pixels (px), ems (em), percentages (%), and more. The order of the values depends on the shorthand property that you are using.

The following example will explain about aligning of content in container to center. You can easily copy it and use with your own code.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Align div horizontally enter by using CSS</title>
<style>
    .main-container{
        width: 60%;
        margin: 0 auto;
        padding: 20px 0px;
        background: #f3f3f3;
    }
</style>
</head>
<body>
    <div class="main-container">
        <h1>Heading</h1>
        <p>Paragraph.</p>
    </div>
</body>
</html>

 

Supported Browsers:
  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

CSS is a styling language used to control the presentation of HTML webpages. You can learn CSS from our CSS Tutorials and CSS Examples

ADVERTISEMENTS